diff options
Diffstat (limited to 'toolkit/themes')
319 files changed, 14253 insertions, 0 deletions
diff --git a/toolkit/themes/LICENSE b/toolkit/themes/LICENSE new file mode 100644 index 0000000000..39d4f8fdf5 --- /dev/null +++ b/toolkit/themes/LICENSE @@ -0,0 +1,2 @@ +All files in this directory are assumed to be licensed under the MPL 2 license +which is used throughout this codebase. diff --git a/toolkit/themes/linux/global/alerts/alert.css b/toolkit/themes/linux/global/alerts/alert.css new file mode 100644 index 0000000000..82772196b9 --- /dev/null +++ b/toolkit/themes/linux/global/alerts/alert.css @@ -0,0 +1,10 @@ +/* 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/alert.inc.css + +#alertBox { + border: 1px solid threedshadow; + background-color: -moz-Dialog; +} diff --git a/toolkit/themes/linux/global/autocomplete.css b/toolkit/themes/linux/global/autocomplete.css new file mode 100644 index 0000000000..9f6fa9b6c8 --- /dev/null +++ b/toolkit/themes/linux/global/autocomplete.css @@ -0,0 +1,91 @@ +/* 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/. */ + +/* ===== autocomplete.css ================================================= + == Styles used by the autocomplete widget. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* ::::: autocomplete ::::: */ + +html|input[nomatch="true"][highlightnonmatches="true"] { + color: red; +} + +/* ::::: autocomplete popups ::::: */ + +panel[type="autocomplete-richlistbox"] { + border: 1px solid ThreeDShadow; + padding: 0; + color: FieldText; + background-color: Field; + appearance: none; +} + +/* ::::: richlistbox autocomplete ::::: */ + +.autocomplete-richlistbox { + appearance: none; + margin: 1px; + background-color: transparent; +} + +.autocomplete-richlistitem[selected] { + background-color: Highlight; + color: HighlightText; +} + +.ac-type-icon { + display: none; + width: 16px; + height: 16px; + max-width: 16px; + max-height: 16px; + margin-inline-start: 6px; + margin-inline-end: 6px; +} + +.ac-site-icon { + display: none; + width: 16px; + height: 16px; + max-width: 16px; + max-height: 16px; + margin-inline-start: 6px; + margin-inline-end: 8px; + list-style-image: url("chrome://mozapps/skin/places/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/linux/global/button.css b/toolkit/themes/linux/global/button.css new file mode 100644 index 0000000000..3e1df18ae1 --- /dev/null +++ b/toolkit/themes/linux/global/button.css @@ -0,0 +1,74 @@ +/* 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/. */ + +/* ===== button.css ===================================================== + == Styles used by the XUL button element. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* :::::::::: button :::::::::: */ + +button { + margin: 1px 5px 2px; + min-width: 6.3em; + color: ButtonText; + text-shadow: none; +} + +.button-box { + appearance: auto; + -moz-default-appearance: button-focus; +} + +.button-text { + margin: 0; + margin-inline-start: 2px; + text-align: center; +} + +/* .......... hover state .......... */ + +button:hover:not(:active,[disabled="true"],[open="true"],[checked="true"],[default="true"]) { + color: -moz-buttonhovertext; +} + +/* .......... active state .......... */ + +button:is(:hover:active, [open="true"]):not([default="true"], [disabled="true"]) { + color: -moz-gtk-buttonactivetext; +} + +/* .......... disabled state .......... */ + +button[disabled="true"] { + color: GrayText; +} + +/* ::::: menu buttons ::::: */ + +.button-menu-dropmarker { + appearance: auto; + -moz-default-appearance: toolbarbutton-dropdown; +} + +/* ::::: plain buttons ::::: */ + +button.plain { + margin: 0 !important; + padding: 0 !important; +} + +button[type="disclosure"] { + margin: 0; + appearance: none; + list-style-image: url("chrome://global/skin/icons/twisty-collapsed.svg"); + -moz-context-properties: fill; + fill: currentColor; + min-width: 0; +} + +button[type="disclosure"][open="true"] { + list-style-image: url("chrome://global/skin/icons/twisty-expanded.svg"); +} diff --git a/toolkit/themes/linux/global/checkbox.css b/toolkit/themes/linux/global/checkbox.css new file mode 100644 index 0000000000..cc7d334827 --- /dev/null +++ b/toolkit/themes/linux/global/checkbox.css @@ -0,0 +1,53 @@ +/* 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/. */ + +/* ===== checkbox.css =================================================== + == Styles used by the XUL checkbox element. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* ::::: checkbox ::::: */ + +checkbox { + appearance: auto; + -moz-default-appearance: checkbox-container; + -moz-box-align: center; + margin: 2px 4px; +} + +.checkbox-label-box { + appearance: auto; + -moz-default-appearance: checkbox-label; +} + +.checkbox-icon[src] { + margin-inline-end: 2px; +} + +.checkbox-label { + margin: 0; +} + +/* ..... focused state ..... */ + +checkbox:-moz-focusring > .checkbox-label-box { + /* Native theming should take care of this but it appears to be broken with + some Gtk themes. Bug 1312169. */ + outline: 1px dotted; +} + +/* ..... disabled state ..... */ + +checkbox[disabled="true"] { + color: GrayText; +} + +/* ::::: checkmark image ::::: */ + +.checkbox-check { + appearance: auto; + -moz-default-appearance: checkbox; + margin: 2px; +} diff --git a/toolkit/themes/linux/global/commonDialog.css b/toolkit/themes/linux/global/commonDialog.css new file mode 100644 index 0000000000..d2aef07d71 --- /dev/null +++ b/toolkit/themes/linux/global/commonDialog.css @@ -0,0 +1,26 @@ +/* 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/. */ + +#infoContainer { + display: flex; + flex-direction: column; + justify-content: center; +} + +/* + * Since we size the window to content, and the icon load is asynchronous, we + * make sure that we take the whole space we could possibly take, regardless of + * whether the icon is loaded. + */ +#iconContainer { + height: 55px; /* maximum icon height + some margin */ + width: 58px; /* maximum icon width + some margin */ +} + +#infoIcon { + display: block; + max-width: 48px; + max-height: 48px; + margin: 3px auto 0; +} diff --git a/toolkit/themes/linux/global/dropmarker.css b/toolkit/themes/linux/global/dropmarker.css new file mode 100644 index 0000000000..4a18f8f6e1 --- /dev/null +++ b/toolkit/themes/linux/global/dropmarker.css @@ -0,0 +1,11 @@ +/* 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; + /* Cut off inheritance for dropmarkers within other widgets where + -moz-image-region might be set for the primary icon. */ + -moz-image-region: auto; +} diff --git a/toolkit/themes/linux/global/findBar.css b/toolkit/themes/linux/global/findBar.css new file mode 100644 index 0000000000..2dd8632a57 --- /dev/null +++ b/toolkit/themes/linux/global/findBar.css @@ -0,0 +1,5 @@ +/* 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/findBar.inc.css diff --git a/toolkit/themes/linux/global/global.css b/toolkit/themes/linux/global/global.css new file mode 100644 index 0000000000..fe21c56433 --- /dev/null +++ b/toolkit/themes/linux/global/global.css @@ -0,0 +1,208 @@ +% 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/. + +/* ===== global.css ===================================================== + == Styles that apply everywhere. + ======================================================================= */ + +%include ../../shared/global.inc.css + +@media (-moz-menubar-drag) { + xul|toolbar[type="menubar"] { + -moz-window-dragging: drag; + } +} + +:root { + /* ::::: Variables ::::: */ + --default-arrowpanel-background: Field; + --default-arrowpanel-color: FieldText; + --default-arrowpanel-border-color: ThreeDShadow; + --arrowpanel-background: var(--default-arrowpanel-background); + --arrowpanel-color: var(--default-arrowpanel-color); + --arrowpanel-border-color: var(--default-arrowpanel-border-color); + --arrowpanel-padding: 10px; + --panel-disabled-color: GrayText; + --panel-description-color: GrayText; + /* ::::: Styles ::::: */ + appearance: auto; + -moz-default-appearance: dialog; + background-color: -moz-Dialog; + color: -moz-DialogText; + font: message-box; +} + +/* ::::: Alert icons :::::*/ + +.message-icon { + list-style-image: url("moz-icon://stock/gtk-dialog-info?size=dialog"); +} + +.alert-dialog #infoIcon, +.alert-icon { + list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=dialog"); +} + +.error-icon { + list-style-image: url("moz-icon://stock/gtk-dialog-error?size=dialog"); +} + +.question-icon { + list-style-image: url("moz-icon://stock/gtk-dialog-question?size=dialog"); +} + +.authentication-icon { + list-style-image: url("chrome://global/skin/icons/Authentication.png"); +} + +/* ::::: iframe ::::: */ + +xul|iframe { + border: none; + width: 100px; + height: 100px; + min-width: 10px; + min-height: 10px; +} + +@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") { + /* In emulation, <iframe> is block instead of inline, so reset the width/height */ + xul|iframe { + width: auto; + height: auto; + } +} + +xul|toolbar[mode="text"] .toolbarbutton-text { + padding: 0 !important; + margin: 3px 5px !important; +} + +/* ::::: Print preview ::::: */ + +.print-preview-navigate-button { + min-width: 1.9em; +} + +.print-preview-navigate-button > .toolbarbutton-icon { + display: none; +} + +#print-preview-portrait-button { + list-style-image: url("moz-icon://stock/gtk-orientation-portrait?size=button"); +} + +#print-preview-landscape-button { + list-style-image: url("moz-icon://stock/gtk-orientation-landscape?size=button"); +} + +#print-preview-portrait-button > .toolbarbutton-icon, +#print-preview-landscape-button > .toolbarbutton-icon { + margin-inline-end: 2px; +} + +html|*#print-preview-pageNumber { + /* 3 chars + (3px border + 1px padding) on both sides */ + width: calc(8px + 3ch); + margin: 0 4px; +} + +/* ::::: Miscellaneous formatting ::::: */ + +:root:-moz-lwtheme { + appearance: none; +} + +:root[lwtheme-image]:-moz-lwtheme-darktext { + text-shadow: 0 -0.5px 1.5px white; +} + +:root[lwtheme-image]:-moz-lwtheme-brighttext { + text-shadow: 1px 1px 1.5px black; +} + +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 ThreeDShadow; + border-bottom: 1px solid ThreeDHighlight; + height: 0; + margin-block: 0.4em; +} +xul|separator.groove[orient="vertical"] { + border-left: 1px solid ThreeDShadow; + border-right: 1px solid ThreeDHighlight; + width: 0; + margin-inline: 0.4em; +} + +xul|description, +xul|label { + cursor: default; + margin-block: 1px 2px; + margin-inline: 6px 5px; +} + +xul|description { + margin-bottom: 4px; +} + +xul|label[disabled="true"] { + color: GrayText; +} + +.tooltip-label { + margin: 0; +} + +.header { + font-weight: bold; +} + +.indent { + margin-inline-start: 23px; +} + +.box-padded { + padding: 5px; +} + +.text-link { + color: -moz-nativehyperlinktext; + cursor: pointer; +} + +.text-link:hover { + text-decoration: underline; +} + +.text-link:-moz-focusring { + outline: 1px dotted; +} + +html|input { + margin: 2px 4px; +} + +xul|notification > xul|hbox > xul|button { + margin-block: 0; +} + +xul|popupnotificationcontent { + margin-top: .5em; +} + +%include ../../shared/notification-popup.inc.css diff --git a/toolkit/themes/linux/global/icons/Authentication.png b/toolkit/themes/linux/global/icons/Authentication.png Binary files differnew file mode 100644 index 0000000000..6fbd24b91e --- /dev/null +++ b/toolkit/themes/linux/global/icons/Authentication.png diff --git a/toolkit/themes/linux/global/icons/blocklist_favicon.png b/toolkit/themes/linux/global/icons/blocklist_favicon.png Binary files differnew file mode 100644 index 0000000000..99fd354f78 --- /dev/null +++ b/toolkit/themes/linux/global/icons/blocklist_favicon.png diff --git a/toolkit/themes/linux/global/icons/errorGhosted-64.png b/toolkit/themes/linux/global/icons/errorGhosted-64.png Binary files differnew file mode 100644 index 0000000000..5ef152a960 --- /dev/null +++ b/toolkit/themes/linux/global/icons/errorGhosted-64.png diff --git a/toolkit/themes/linux/global/icons/informationGhosted-64.png b/toolkit/themes/linux/global/icons/informationGhosted-64.png Binary files differnew file mode 100644 index 0000000000..edd5b4187f --- /dev/null +++ b/toolkit/themes/linux/global/icons/informationGhosted-64.png diff --git a/toolkit/themes/linux/global/icons/questionGhosted-64.png b/toolkit/themes/linux/global/icons/questionGhosted-64.png Binary files differnew file mode 100644 index 0000000000..568e4d88f9 --- /dev/null +++ b/toolkit/themes/linux/global/icons/questionGhosted-64.png diff --git a/toolkit/themes/linux/global/icons/sslWarning.png b/toolkit/themes/linux/global/icons/sslWarning.png Binary files differnew file mode 100644 index 0000000000..5095bb1f5b --- /dev/null +++ b/toolkit/themes/linux/global/icons/sslWarning.png diff --git a/toolkit/themes/linux/global/icons/warningGhosted-64.png b/toolkit/themes/linux/global/icons/warningGhosted-64.png Binary files differnew file mode 100644 index 0000000000..92680780d1 --- /dev/null +++ b/toolkit/themes/linux/global/icons/warningGhosted-64.png diff --git a/toolkit/themes/linux/global/in-content/common.css b/toolkit/themes/linux/global/in-content/common.css new file mode 100644 index 0000000000..a6699e6a13 --- /dev/null +++ b/toolkit/themes/linux/global/in-content/common.css @@ -0,0 +1,57 @@ +/* - 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/in-content/common.inc.css + +@media (prefers-color-scheme: dark) { + /* Don't apply scrollbar-color since it removes the native scrollbar style on Linux */ + :root { + scrollbar-color: initial; + } +} + +xul|tab[visuallyselected] { + /* Override styles for tab[selected] from + toolkit/themes/linux/global/tabbox.css */ + margin-bottom: 0; +} + +/* Overriding appearance also avoids incorrect selection background color with + light text. */ +xul|button > xul|*.button-box, +xul|menulist::part(label-box), +xul|*.radio-label-box, +xul|*.checkbox-label-box { + appearance: none; +} + +xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker { + appearance: none !important; +} + +xul|*.help-button > xul|*.button-box > xul|*.button-icon { + margin-inline-end: 0; +} + +xul|menulist { + font-size: inherit; +} + +xul|menulist::part(dropmarker) { + display: -moz-box; + margin-block: 6px; +} + +xul|menulist:-moz-focusring::part(label-box) { + outline: none; +} + +html|input[type="checkbox"]:-moz-focusring + html|label:before { + outline: 1px dotted; +} + +html|button { + /* XUL button min-width */ + min-width: 6.3em; +} diff --git a/toolkit/themes/linux/global/in-content/info-pages.css b/toolkit/themes/linux/global/in-content/info-pages.css new file mode 100644 index 0000000000..bdfec2d284 --- /dev/null +++ b/toolkit/themes/linux/global/in-content/info-pages.css @@ -0,0 +1,5 @@ +/* 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/in-content/info-pages.inc.css diff --git a/toolkit/themes/linux/global/jar.mn b/toolkit/themes/linux/global/jar.mn new file mode 100644 index 0000000000..b98c1c7827 --- /dev/null +++ b/toolkit/themes/linux/global/jar.mn @@ -0,0 +1,36 @@ +# 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/non-mac.jar.inc.mn + +toolkit.jar: + skin/classic/global/autocomplete.css + skin/classic/global/button.css + skin/classic/global/checkbox.css + skin/classic/global/commonDialog.css + skin/classic/global/dropmarker.css +* skin/classic/global/findBar.css +* skin/classic/global/global.css +* skin/classic/global/menu.css + skin/classic/global/menulist.css + skin/classic/global/netError.css + skin/classic/global/popup.css +* skin/classic/global/popupnotification.css + skin/classic/global/radio.css + skin/classic/global/richlistbox.css + skin/classic/global/search-textbox.css + skin/classic/global/splitter.css + skin/classic/global/tabbox.css + skin/classic/global/toolbar.css + skin/classic/global/toolbarbutton.css + skin/classic/global/tooltip.css +* skin/classic/global/tree.css +* skin/classic/global/alerts/alert.css (alerts/alert.css) + + skin/classic/global/icons/Authentication.png (icons/Authentication.png) + skin/classic/global/icons/blocklist_favicon.png (icons/blocklist_favicon.png) + skin/classic/global/icons/sslWarning.png (icons/sslWarning.png) + +* skin/classic/global/in-content/common.css (in-content/common.css) +* skin/classic/global/in-content/info-pages.css (in-content/info-pages.css) diff --git a/toolkit/themes/linux/global/menu.css b/toolkit/themes/linux/global/menu.css new file mode 100644 index 0000000000..28daa004f2 --- /dev/null +++ b/toolkit/themes/linux/global/menu.css @@ -0,0 +1,195 @@ +/* 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/. */ + +/* ===== menu.css ======================================================= + == Styles used by XUL menu-related elements. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* ::::: menu/menuitem ::::: */ + +menupopup, +menubar { + font: menu; +} + +menu, +menuitem, +menucaption { + appearance: auto; + -moz-default-appearance: menuitem; + -moz-box-align: center; + max-width: 42em; + list-style-image: none; + -moz-image-region: auto; + + /* Specify our background to avoid triggering reflows on hover. This is an + * optimization, as backgrounds don't disable theming on XUL elements, but + * also papers over bug 1653832. */ + background-color: initial; +} + +menu[_moz-menuactive="true"], +menuitem[_moz-menuactive="true"] { + color: -moz-menuhovertext; + background-color: -moz-menuhover; +} + +menuitem[customoptionstyling="true"] { + appearance: none; +} + +menuitem[customoptionstyling="true"][_moz-menuactive="true"] { + /* -moz-menuhovertext and -moz-menuhover only apply + when -moz-appearance is set to menuitem. */ + color: highlighttext; + background-color: highlight; +} + +menu[disabled="true"], +menuitem[disabled="true"], +menucaption[disabled="true"] { + color: GrayText; +} + +menubar > menu { + padding: 0 4px; + color: -moz-menubartext; +} + +menubar:-moz-lwtheme > menu { + text-shadow: none; +} + +menubar:-moz-lwtheme > menu:not([open="true"]) { + color: inherit; + text-shadow: inherit; +} + +menubar > menu[_moz-menuactive="true"]:not([open], [disabled="true"], :-moz-lwtheme) { + color: -moz-menubartext; +} + +menubar > menu[open] { + color: -moz-menubarhovertext; + background-color: -moz-menuhover; +} + +menuitem[default="true"], +menuitem.spell-suggestion, +menucaption { + font-weight: bold; +} + +/* ::::: menu/menuitems in menulist popups ::::: */ + +menulist > menupopup { + font: inherit; +} + +menulist > menupopup > menuitem, +menulist > menupopup > menucaption, +menulist > menupopup > menu { + padding: 1px 5px; + max-width: none; +} + +/* ..... internal content .... */ + +.menu-text, +.menu-iconic-left, +.menu-iconic-text { + margin-top: 0 !important; + margin-bottom: 0 !important; + margin-inline-start: 0 !important; + margin-inline-end: 2px !important; +} + +.menu-text { + /* This is (18 + the size of end-padding on .menu-iconic-left)px */ + margin-inline-start: 21px !important; +} + +.menu-accel, +.menu-iconic-accel { + margin-top: 0 !important; + margin-bottom: 0 !important; + margin-inline-start: 7px !important; +} + +.menu-accel-container { + -moz-box-pack: end; +} + +.menu-iconic-left { + width: 16px; + /* We can only hardcode this, to make the default GTK icon<->label spacing */ + padding-inline-end: 3px !important; +} + +.menu-iconic-icon { + width: 16px; + height: 16px; +} + +.menu-right { + margin-top: 0; + margin-bottom: 0; + margin-inline-start: 6px; + margin-inline-end: 0; + width: 1ex; + height: 1ex; + /* These next two rules are needed to prevent inheritance and thus ugliness */ + list-style-image: none; + -moz-image-region: auto; + appearance: auto; + -moz-default-appearance: menuarrow; +} + +.menubar-left { + margin-top: 0; + margin-bottom: 0; + margin-inline-start: 0; + margin-inline-end: 2px; +} + +.menubar-text { + margin: 0 1px !important; +} + + +menulist > menupopup > menuitem > .menu-iconic-left, +menulist > menupopup > menucaption > .menu-iconic-left, +menulist > menupopup > menu > .menu-iconic-left { + display: none; +} + +/* ::::: checkbox menuitem ::::: */ + +menuitem[checked="true"] { + appearance: auto !important; + -moz-default-appearance: checkmenuitem !important; +} + +menuitem[type="checkbox"] { + appearance: auto !important; + -moz-default-appearance: checkmenuitem !important; +} + +/* ::::: radio menuitem ::::: */ + +menuitem[type="radio"] { + appearance: auto !important; + -moz-default-appearance: radiomenuitem !important; +} + +/* ::::: menuseparator ::::: */ + +menuseparator { + appearance: auto !important; + -moz-default-appearance: menuseparator !important; +} + +%include ../../shared/menu-scrolling.inc.css diff --git a/toolkit/themes/linux/global/menulist.css b/toolkit/themes/linux/global/menulist.css new file mode 100644 index 0000000000..10acbf6922 --- /dev/null +++ b/toolkit/themes/linux/global/menulist.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"); + +:host { + appearance: auto; + -moz-default-appearance: menulist; + margin: 2px 4px; + color: -moz-DialogText; + font: menu; + text-shadow: none; +} + +:host(:not([disabled="true"]):hover) { + color: -moz-buttonhovertext; +} + +:host(:not([disabled="true"]):hover:active), +:host(:not([disabled="true"])[open="true"]) { + color: -moz-gtk-buttonactivetext; +} + +:host([disabled="true"]) { + color: GrayText; +} + +/* Label box */ + +#label-box { + appearance: auto; + -moz-default-appearance: menulist-text; + -moz-box-align: center; + -moz-box-pack: center; + color: inherit; +} + +/* Labels */ + +label { + margin: 1px 3px !important; +} + +#highlightable-label:not([highlightable="true"]), +#label[highlightable="true"] { + display: none; +} + +/* Dropmarker */ + +dropmarker { + display: none; +} diff --git a/toolkit/themes/linux/global/moz.build b/toolkit/themes/linux/global/moz.build new file mode 100644 index 0000000000..d988c0ff9b --- /dev/null +++ b/toolkit/themes/linux/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/linux/global/netError.css b/toolkit/themes/linux/global/netError.css new file mode 100644 index 0000000000..21866977ea --- /dev/null +++ b/toolkit/themes/linux/global/netError.css @@ -0,0 +1,102 @@ +/* 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/. */ + +/* + * This defines the look-and-feel styling of the error pages. + * (see: netError.xhtml) + * + * Original styling by William Price <bugzilla@mob.rice.edu> + * Updated by: Michael Ventnor <m.ventnor@gmail.com> + */ + +html { + background: -moz-Dialog; +} + +body { + margin: 0; + padding: 0 1em; + color: FieldText; + font: message-box; +} + +h1 { + margin: 0 0 .6em 0; + border-bottom: 1px solid ThreeDLightShadow; + font-size: 160%; +} + +ul, ol { + margin: 0; + margin-inline-start: 1.5em; + padding: 0; +} + +ul > li, ol > li { + margin-bottom: .5em; +} + +ul { + list-style: square; +} + +#errorPageContainer { + position: relative; + min-width: 13em; + max-width: 52em; + margin: 4em auto; + border: 1px solid ThreeDShadow; + border-radius: 10px; + padding: 3em; + padding-inline-start: 30px; + background: url("moz-icon://stock/gtk-dialog-warning?size=dialog") left 0 no-repeat Field; + background-origin: content-box; +} + +#errorPageContainer.certerror { + background-image: url("chrome://global/skin/icons/sslWarning.png"); +} + +#errorPageContainer:dir(rtl) { + background-position: right 0; +} + +#errorLongContent, +#errorTitle { + margin-inline-start: 80px; +} + +#errorShortDesc > p { + overflow: auto; + border-bottom: 1px solid ThreeDLightShadow; + padding-bottom: 1em; + font-size: 130%; + white-space: pre-wrap; +} + +#errorLongDesc { + padding-inline-end: 3em; + font-size: 110%; +} + +#errorTryAgain { + margin-top: 2em; + margin-inline-start: 80px; +} + +#errorContainer { + display: none; +} + +#securityOverrideDiv { + padding-top: 10px; +} + +#securityOverrideContent { + background-color: InfoBackground; + color: InfoText; + padding: 10px; + border-radius: 10px; + display: none; +} diff --git a/toolkit/themes/linux/global/popup.css b/toolkit/themes/linux/global/popup.css new file mode 100644 index 0000000000..2994dbebc8 --- /dev/null +++ b/toolkit/themes/linux/global/popup.css @@ -0,0 +1,104 @@ +/* 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 ::::: */ + +menupopup, +panel { + appearance: auto; + -moz-default-appearance: menupopup; + min-width: 1px; + color: MenuText; +} + +/* ::::: arrow panel ::::: */ + +panel[type="arrow"] { + appearance: none; +} + +panel[type="arrow"][side="top"], +panel[type="arrow"][side="bottom"] { + margin-inline: -20px; +} + +panel[type="arrow"][side="left"], +panel[type="arrow"][side="right"] { + margin-block: -20px; +} + +.panel-arrowcontent { + padding: var(--arrowpanel-padding); + color: var(--arrowpanel-color); + background: var(--arrowpanel-background); + border: 1px solid var(--arrowpanel-border-color); + box-shadow: 0 0 4px hsla(0,0%,0%,.2); + margin: 4px; +} + +.panel-arrowcontent > html|slot { + /* propagate border-radius from arrowcontent to slotted children */ + border-radius: inherit; +} + +:host([orient=vertical]) .panel-arrowcontent { + -moz-box-orient: vertical; +} + +panel[type="arrow"].panel-no-padding::part(arrowcontent) { + padding: 0; + overflow: hidden; /* Don't let panel content overflow the border */ +} + +:is(panel, menupopup)::part(arrow) { + -moz-context-properties: fill, stroke; + fill: var(--arrowpanel-background); + stroke: var(--arrowpanel-border-color); +} + +:is(panel, menupopup)[side="top"]::part(arrow), +:is(panel, menupopup)[side="bottom"]::part(arrow) { + list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg"); + position: relative; + margin-inline: 10px; +} + +:is(panel, menupopup)[side="top"]::part(arrow) { + margin-bottom: -5px; +} + +:is(panel, menupopup)[side="bottom"]::part(arrow) { + transform: scaleY(-1); + margin-top: -5px; +} + +:is(panel, menupopup)[side="left"]::part(arrow), +:is(panel, menupopup)[side="right"]::part(arrow) { + list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg"); + position: relative; + margin-block: 10px; +} + +:is(panel, menupopup)[side="left"]::part(arrow) { + margin-right: -5px; +} + +:is(panel, menupopup)[side="right"]::part(arrow) { + transform: scaleX(-1); + margin-left: -5px; +} + +/* rules for popups associated with menulists */ + +menulist > menupopup { + padding: 0; + min-width: 0; +} + +menupopup[customoptionstyling="true"] { + appearance: none; +} diff --git a/toolkit/themes/linux/global/popupnotification.css b/toolkit/themes/linux/global/popupnotification.css new file mode 100644 index 0000000000..06908b1033 --- /dev/null +++ b/toolkit/themes/linux/global/popupnotification.css @@ -0,0 +1,10 @@ +%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 +%include ../../shared/popupnotification.inc.css + +.popup-notification-secondary-button:not([hidden="true"]) ~ .popup-notification-primary-button:not([default]) { + border-inline-start: 1px solid var(--panel-separator-color); +} diff --git a/toolkit/themes/linux/global/radio.css b/toolkit/themes/linux/global/radio.css new file mode 100644 index 0000000000..5780f9a3aa --- /dev/null +++ b/toolkit/themes/linux/global/radio.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/. */ + +/* ===== radio.css =================================================== + == Styles used by the XUL radio element. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* ::::: radio ::::: */ + +radio { + appearance: auto; + -moz-default-appearance: radio-container; + -moz-box-align: center; + margin: 2px 4px; +} + +.radio-check { + appearance: auto; + -moz-default-appearance: radio; + margin: 2px; +} + +.radio-label-box { + appearance: auto; + -moz-default-appearance: radio-label; +} + +.radio-icon[src] { + margin-inline-end: 2px; +} + +.radio-label { + margin: 0; +} + +/* ..... focused state ..... */ + +radio[focused="true"] > .radio-label-box { + /* Native theming should take care of this but it appears to be broken with + some Gtk themes. Bug 1312169. */ + outline: 1px dotted; +} + +/* ..... disabled state ..... */ + +radio[disabled="true"] { + color: GrayText; +} diff --git a/toolkit/themes/linux/global/richlistbox.css b/toolkit/themes/linux/global/richlistbox.css new file mode 100644 index 0000000000..2820198343 --- /dev/null +++ b/toolkit/themes/linux/global/richlistbox.css @@ -0,0 +1,65 @@ +/* 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; + overflow: auto; +} + +richlistbox[disabled="true"] { + color: GrayText; +} + +richlistitem[selected="true"] { + background-color: -moz-cellhighlight; + color: -moz-cellhighlighttext; +} + +richlistbox:focus > richlistitem[selected="true"] { + background-color: Highlight; + color: HighlightText; +} + +richlistbox[seltype="multiple"]:focus > richlistitem[current="true"] { + outline: 1px dotted Highlight; + outline-offset: -1px; +} + +richlistbox[seltype="multiple"]:focus > richlistitem[current="true"][selected="true"] { + outline: 1px dotted #F3D982; /* TODO: find a suitable system color */ +} + +richlistbox.theme-listbox:focus > richlistitem[selected="true"][current="true"] { + outline: 1px dotted #F3D982; +} + +richlistbox.theme-listbox:focus > richlistitem[current="true"] { + outline: 1px dotted Highlight; + outline-offset: -1px; +} + +richlistbox.theme-listbox:not(:focus) > richlistitem[selected="true"] { + background-color: -moz-cellhighlight; + color: -moz-cellhighlighttext; +} + +richlistbox.theme-listbox > richlistitem > label { + margin: 0px; + padding-top: 0px; + padding-bottom: 1px; + padding-inline-start: 4px; + padding-inline-end: 0px; + white-space: nowrap; +} + +listheader { + background-color: -moz-Dialog; + color: -moz-DialogText; +} diff --git a/toolkit/themes/linux/global/search-textbox.css b/toolkit/themes/linux/global/search-textbox.css new file mode 100644 index 0000000000..128b81a363 --- /dev/null +++ b/toolkit/themes/linux/global/search-textbox.css @@ -0,0 +1,72 @@ +/* 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"); + +/* ::::: search textbox ::::: */ + +:host { + appearance: auto; + -moz-default-appearance: textfield; + cursor: text; + margin: 2px 4px; /* matches <input> global.css margin */ + padding: 2px 2px 3px; + padding-inline-start: 4px; + background-color: Field; + color: FieldText; +} + +html|input { + border: none; + padding: 0 1px; + background-color: transparent; + outline: none; + color: inherit; + font: inherit; + text-shadow: inherit; + box-sizing: border-box; + -moz-box-flex: 1; + text-align: inherit; +} + +/* ..... readonly state ..... */ + +:host([readonly="true"]) { + background-color: -moz-Dialog; + color: -moz-DialogText; +} + +/* ..... disabled state ..... */ + +:host([disabled="true"]) { + cursor: default; + background-color: -moz-Dialog; + color: GrayText; +} + +/* ::::: icons ::::: */ + +:host(:not([searchbutton])) > .textbox-search-sign { + list-style-image: url(chrome://global/skin/icons/search-textbox.svg); + margin-inline-end: 5px; +} + +:host([searchbutton]) .textbox-search-icon { + list-style-image: url(chrome://global/skin/icons/search-textbox.svg); +} + +.textbox-search-clear { + list-style-image: url(chrome://global/skin/icons/searchfield-cancel.svg); +} + +:host([searchbutton]) .textbox-search-icon:not([disabled]), +.textbox-search-clear:not([disabled]) { + cursor: pointer; +} + +/* Don't leave extra blank space with long placeholders (see bug 1385902) */ +:host(:not([searchbutton])) > .textbox-search-icons:not([selectedIndex="1"]) { + display: none; +} diff --git a/toolkit/themes/linux/global/splitter.css b/toolkit/themes/linux/global/splitter.css new file mode 100644 index 0000000000..312e72272d --- /dev/null +++ b/toolkit/themes/linux/global/splitter.css @@ -0,0 +1,53 @@ +/* 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/. */ + +/* ===== splitter.css =================================================== + == Styles used by the XUL splitter element. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* ::::: splitter (vertical) ::::: */ + +splitter { + appearance: auto; + -moz-default-appearance: splitter; + -moz-box-align: center; + -moz-box-pack: center; + cursor: ew-resize; +} + +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; +} + +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/linux/global/tabbox.css b/toolkit/themes/linux/global/tabbox.css new file mode 100644 index 0000000000..b4acb2fd61 --- /dev/null +++ b/toolkit/themes/linux/global/tabbox.css @@ -0,0 +1,53 @@ +/* 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/. */ + +/* ===== tabbox.css ================================================= + == Styles used by XUL tab-related elements. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + + +/* ::::: tabs ::::: */ + +tabs { + position: relative; + z-index: 0; +} + +/* ::::: tabpanels ::::: */ + +tabpanels { + appearance: auto; + -moz-default-appearance: tabpanels; + padding: 8px; + color: -moz-DialogText; +} + +/* ::::: tab ::::: */ + +tab { + position: relative; + appearance: auto; + -moz-default-appearance: tab; + margin-top: 2px; + padding: 3px 4px; + color: -moz-DialogText; +} + +tab[visuallyselected="true"] { + z-index: 1; + margin-top: 0; + margin-bottom: -2px; + padding-top: 4px; + padding-bottom: 6px; +} + +tab + tab { + margin-inline-start: -2px; +} + +.tab-text { + margin: 0 !important; +} diff --git a/toolkit/themes/linux/global/toolbar.css b/toolkit/themes/linux/global/toolbar.css new file mode 100644 index 0000000000..94988f7acf --- /dev/null +++ b/toolkit/themes/linux/global/toolbar.css @@ -0,0 +1,66 @@ +/* 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/. */ + +/* ===== toolbar.css ==================================================== + == Styles used by XUL toolbar-related elements. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +toolbox { + appearance: auto; + -moz-default-appearance: toolbox; +} + +toolbar { + appearance: auto; + -moz-default-appearance: toolbar; + min-width: 1px; + min-height: 20px; + padding: 2px 0; +} + +toolbar[type="menubar"] { + appearance: auto; + -moz-default-appearance: menubar; + color: -moz-menubartext; + min-width: 1px; + min-height: 20px; + padding: 1px 0; +} + +toolbar:-moz-lwtheme { + appearance: none; + color: inherit; +} + +toolbarseparator { + appearance: auto; + -moz-default-appearance: separator; + margin: 0; + min-width: 2px; +} + +toolbarspacer { + width: 15px; +} + +toolbarpaletteitem { + cursor: grab; +} + +/* 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/linux/global/toolbarbutton.css b/toolkit/themes/linux/global/toolbarbutton.css new file mode 100644 index 0000000000..910e0a64b2 --- /dev/null +++ b/toolkit/themes/linux/global/toolbarbutton.css @@ -0,0 +1,95 @@ +/* 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.css ===================================================== + == Styles used by the XUL button element. + ======================================================================= */ + +/* ::::: toolbarbutton ::::: */ + +toolbarbutton { + appearance: auto; + -moz-default-appearance: toolbarbutton; + -moz-box-align: center; + -moz-box-pack: center; + margin: 0; + padding: 3px; +} + +:root[lwtheme-image] toolbarbutton { + text-shadow: none; +} + +.toolbarbutton-text { + margin: 0; + text-align: center; +} + +toolbarbutton.tabbable { + -moz-user-focus: normal !important; +} + +toolbarbutton[checked="true"] { + color: ButtonText; +} + +toolbarbutton:hover { + color: -moz-buttonhovertext; +} + +toolbarbutton:hover:active:not([disabled="true"]), +toolbarbutton[open="true"] { + color: ButtonText; +} + +toolbarbutton[disabled="true"] { + color: GrayText; +} + +toolbarbutton:-moz-lwtheme:not(:hover, [checked="true"], [open="true"], [disabled="true"]) { + text-shadow: inherit; +} + +/* ::::: toolbarbutton menu ::::: */ + +.toolbarbutton-menu-dropmarker { + appearance: auto; + -moz-default-appearance: toolbarbutton-dropdown; +} + +.toolbarbutton-combined-buttons-dropmarker { + appearance: none; + list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg"); + -moz-context-properties: fill; + fill: currentColor; + width: auto; +} + +/* ::::: toolbarbutton badged ::::: */ +.toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) { + margin-inline-end: 0; +} + +.toolbarbutton-badge { + box-sizing: border-box; + overflow: hidden; + white-space: nowrap; + background-color: #d90000; + font-size: 10px; + padding: 0 2px 1px; + 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: -6px 0 0 !important; + margin-inline-end: -8px !important; + min-width: 14px; + max-width: 24px; + line-height: 10px; + text-align: center; + align-self: start; + justify-self: end; +} diff --git a/toolkit/themes/linux/global/tooltip.css b/toolkit/themes/linux/global/tooltip.css new file mode 100644 index 0000000000..7c50f81cb7 --- /dev/null +++ b/toolkit/themes/linux/global/tooltip.css @@ -0,0 +1,19 @@ +/* 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/. */ + +/* + * This file is imported as a UA stylesheet because the default tooltip is + * built as native anonymous content. + */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +tooltip { + appearance: auto; + -moz-default-appearance: tooltip; + margin-top: 21px; + max-width: 40em; + color: InfoText; + font: message-box; +} diff --git a/toolkit/themes/linux/global/tree.css b/toolkit/themes/linux/global/tree.css new file mode 100644 index 0000000000..c9b2c4a9bd --- /dev/null +++ b/toolkit/themes/linux/global/tree.css @@ -0,0 +1,12 @@ +/* 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/tree.inc.css + +/* ::::: sort direction indicator ::::: */ + +.treecol-sortdirection { + appearance: auto; + -moz-default-appearance: treeheadersortarrow; +} diff --git a/toolkit/themes/linux/moz.build b/toolkit/themes/linux/moz.build new file mode 100644 index 0000000000..096017b685 --- /dev/null +++ b/toolkit/themes/linux/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/. + +DIRS += ["global", "mozapps"] diff --git a/toolkit/themes/linux/mozapps/jar.mn b/toolkit/themes/linux/mozapps/jar.mn new file mode 100644 index 0000000000..4976c3b0ad --- /dev/null +++ b/toolkit/themes/linux/mozapps/jar.mn @@ -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/. + +toolkit.jar: +#include ../../shared/mozapps.inc.mn + skin/classic/mozapps/update/updates.css (update/updates.css) diff --git a/toolkit/themes/linux/mozapps/moz.build b/toolkit/themes/linux/mozapps/moz.build new file mode 100644 index 0000000000..d988c0ff9b --- /dev/null +++ b/toolkit/themes/linux/mozapps/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/linux/mozapps/update/updates.css b/toolkit/themes/linux/mozapps/update/updates.css new file mode 100644 index 0000000000..77e69e46cd --- /dev/null +++ b/toolkit/themes/linux/mozapps/update/updates.css @@ -0,0 +1,89 @@ +/* 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/. */ + +/* Elevation Dialog */ +/* Specify the size for the UI so it has a fixed size. 3rd + party themes should typically specify the same values. */ +#elevationBox, +.update-content { + height: 360px; + width: 700px; +} + +/* Remove margin and padding so the inner UI will extend to the edge of the + window. 3rd party themes should typically specify the same values. */ +#updates { + margin: 0; + padding: 0; +} + +.update-header { + border-bottom: 2px groove ThreeDFace; + background-color: Window; + color: WindowText; +} + +.update-header-box-1 { + padding: 5px 0; +} + +.update-content { + padding: 10px; +} + +.update-header-label { + font-weight: bold; +} + +#update-button-box { + margin: 0; + padding: 6px 10px 10px; +} + +.update-buttons-separator { + margin-block: 0 !important; +} + +#updateFinishedName { + font-weight: bold; + font-size: larger; +} + +/* Update History Window */ +update { + border-bottom: 1px dotted #C0C0C0; +} + +.update-name { + font-weight: bold; +} + +.update-label-column { + -moz-box-align: end; +} + +.update-type { + font-weight: bold; + color: #990000; +} + +.update-status-value, +.update-installedOn-value { + margin-inline-start: 1ch; +} + +#historyItems { + height: 200px; + margin: 1px 5px 5px; +} + +#historyItems .update { + padding: 5px; + display: -moz-box; + -moz-box-orient: vertical; +} + +.update-name { + -moz-box-flex: 1; +} diff --git a/toolkit/themes/linux/mozapps/viewsource/viewsource.css b/toolkit/themes/linux/mozapps/viewsource/viewsource.css new file mode 100644 index 0000000000..0d388bc66d --- /dev/null +++ b/toolkit/themes/linux/mozapps/viewsource/viewsource.css @@ -0,0 +1,117 @@ +/* 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/. */ + +#menu_savePage { + list-style-image: url("moz-icon://stock/gtk-save-as?size=menu"); +} + +#menu_printPreview { + list-style-image: url("moz-icon://stock/gtk-print-preview?size=menu"); +} + +#menu_print { + list-style-image: url("moz-icon://stock/gtk-print?size=menu"); +} + +#menu_close { + list-style-image: url("moz-icon://stock/gtk-close?size=menu"); +} + +#menu_undo { + list-style-image: url("moz-icon://stock/gtk-undo?size=menu"); +} + +#menu_undo[disabled] { + list-style-image: url("moz-icon://stock/gtk-undo?size=menu&state=disabled"); +} + +#menu_redo { + list-style-image: url("moz-icon://stock/gtk-redo?size=menu"); +} + +#menu_redo[disabled] { + list-style-image: url("moz-icon://stock/gtk-redo?size=menu&state=disabled"); +} + +#menu_cut { + list-style-image: url("moz-icon://stock/gtk-cut?size=menu"); +} + +#menu_cut[disabled] { + list-style-image: url("moz-icon://stock/gtk-cut?size=menu&state=disabled"); +} + +#cMenu_copy, +#menu_copy { + list-style-image: url("moz-icon://stock/gtk-copy?size=menu"); +} + +#menu_copy[disabled] { + list-style-image: url("moz-icon://stock/gtk-copy?size=menu&state=disabled"); +} + +#menu_paste { + list-style-image: url("moz-icon://stock/gtk-paste?size=menu"); +} + +#menu_paste[disabled] { + list-style-image: url("moz-icon://stock/gtk-paste?size=menu&state=disabled"); +} + +#menu_delete { + list-style-image: url("moz-icon://stock/gtk-delete?size=menu"); +} + +#menu_delete[disabled] { + list-style-image: url("moz-icon://stock/gtk-delete?size=menu&state=disabled"); +} + +#cMenu_selectAll, +#menu_selectAll { + list-style-image: url("moz-icon://stock/gtk-select-all?size=menu"); +} + +#menu_find { + list-style-image: url("moz-icon://stock/gtk-find?size=menu"); +} + +#menu_find[disabled] { + list-style-image: url("moz-icon://stock/gtk-find?size=menu&state=disabled"); +} + +#menu_goToLine { + list-style-image: url("moz-icon://stock/gtk-jump-to?size=menu"); +} + +#menu_goToLine[disabled] { + list-style-image: url("moz-icon://stock/gtk-jump-to?size=menu&state=disabled"); +} + +#menu_reload { + list-style-image: url("moz-icon://stock/gtk-refresh?size=menu"); +} + +#menu_reload[disabled] { + list-style-image: url("moz-icon://stock/gtk-refresh?size=menu&state=disabled"); +} + +#menu_textEnlarge { + list-style-image: url("moz-icon://stock/gtk-zoom-in?size=menu"); +} + +#menu_textReduce { + list-style-image: url("moz-icon://stock/gtk-zoom-out?size=menu"); +} + +#menu_textReset { + list-style-image: url("moz-icon://stock/gtk-zoom-100?size=menu"); +} + +#menu_openHelp { + list-style-image: url("moz-icon://stock/gtk-help?size=menu"); +} + +#aboutName { + list-style-image: url("moz-icon://stock/gtk-about?size=menu"); +} diff --git a/toolkit/themes/mobile/global/about.css b/toolkit/themes/mobile/global/about.css new file mode 100644 index 0000000000..4afa53cbca --- /dev/null +++ b/toolkit/themes/mobile/global/about.css @@ -0,0 +1,38 @@ +/* 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/. */ + +html { + background: #f0f0f0; + padding: 0 1em; + font-family: sans-serif !important; + font-size: 100% !important; +} + +body { + color: black; + position: relative; + min-width: 330px; + max-width: 50em; + margin: 1em auto; + border: 1px solid gray; + border-radius: 10px; + padding: 3em; + padding-inline-start: 30px; + background: white; +} + +.aboutPageWideContainer { + max-width: 80%; +} + +img { + border: 0; +} + +ul { + margin: 0; + margin-inline-start: 1.5em; + padding: 0; + list-style: square; +} diff --git a/toolkit/themes/mobile/global/aboutMemory.css b/toolkit/themes/mobile/global/aboutMemory.css new file mode 100644 index 0000000000..cf8a8bac27 --- /dev/null +++ b/toolkit/themes/mobile/global/aboutMemory.css @@ -0,0 +1,180 @@ +/* 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 version used for desktop is located at + * toolkit/components/aboutmemory/content/aboutMemory.css. + * Mobile-specific stuff is at the bottom of this file. + */ + +html { + background: -moz-Dialog; + color: -moz-DialogText; + font: message-box; +} + +body { + padding: 0 2em; + margin: 0; + min-width: 45em; + margin: auto; +} + +/* The comment at the top of aboutMemory.xhtml explains this font choice. */ +pre { + font-family: Fira Mono, DejaVu Sans Mono, Liberation Mono, monospace; +} + +div.ancillary { + margin: 0.5em 0; + user-select: none; +} + +div.section { + padding: 2em; + margin: 1em 0em; + border: 1px solid ThreeDShadow; + border-radius: 10px; + background: Field; + color: FieldText; +} + +div.outputContainer { + display: flex; +} + +div.sections { + flex: 1; + min-width: 0; +} + +div.sidebar { + flex: 0 0 max-content; + margin-left: 1em; +} + +div.sidebarContents { + position: sticky; + top: 0.5em; +} + +div.sidebarItem { + padding: 0.5em; + margin: 1em 0em; + border: 1px solid ThreeDShadow; + border-radius: 10px; + background: Field; + color: FieldText; + user-select: none; /* no need to include this when cutting+pasting */ +} + +input.filterInput { + width: calc(100% - 1em); +} + +ul.index { + list-style-position: inside; + margin: 0; + padding: 0; +} + +ul.index > li { + padding-left: 0.5em; +} + +div.opsRow { + padding: 0.5em; + margin-right: 0.5em; + margin-top: 0.5em; + border: 1px solid ThreeDShadow; + border-radius: 10px; + background: Field; + color: FieldText; + display: inline-block; +} + +div.opsRowLabel, div.sidebarLabel { + display: block; + margin-bottom: 0.2em; + font-weight: bold; +} + +.opsRowLabel label { + margin-left: 1em; + font-weight: normal; +} + +div.non-verbose pre.entries { + overflow-x: auto; + text-overflow: ellipsis; +} + +h1 { + padding: 0; + margin: 0; +} + +h2 { + padding-left: .1em; +} + +.accuracyWarning, .badInputWarning, .invalid { + /* + * Technically this should be used with the default background colour, + * instead we're using the default field background colour, + * I hope this will be okay. + */ + color: -moz-activehyperlinktext; +} + +.treeline { + color: FieldText; + opacity: 0.5; +} + +.mrValue { + font-weight: bold; +} + +.hasKids { + cursor: pointer; +} + +.hasKids:hover { + text-decoration: underline; +} + +.noselect { + user-select: none; /* no need to include this when cutting+pasting */ +} + +.option { + font-size: 80%; + user-select: none; /* no need to include this when cutting+pasting */ +} + +.legend { + font-size: 80%; + user-select: none; /* no need to include this when cutting+pasting */ +} + +.debug { + font-size: 80%; +} + +.hidden { + display: none; +} + +/* Mobile-specific parts go here. */ + +/* buttons are different sizes and overlapping without this */ +button { + margin: 1%; + padding: 2%; +} + +.hiddenOnMobile { + display: none; +} diff --git a/toolkit/themes/mobile/global/aboutNetworking.css b/toolkit/themes/mobile/global/aboutNetworking.css new file mode 100644 index 0000000000..f1d499da48 --- /dev/null +++ b/toolkit/themes/mobile/global/aboutNetworking.css @@ -0,0 +1,83 @@ +/* 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/. */ + +#sectionTitle { + float: inline-start; + display: none; +} + +#refreshDiv { + justify-content: flex-end; + margin-bottom: 0.5em; +} + +#refreshDiv > * { + font-size: 2em; + vertical-align: middle; +} + +#refreshDiv > input { + height: 1em; + width: 1em; +} + +#refreshButton { + margin-top: 0; +} + +/** Categories **/ + +#categories { + display: inline-flex; +} + +.category { + font-size: 2em; + padding: 0.2em; + text-align: center; + cursor: pointer; + /* Center category names */ + display: flex; + align-items: center; +} + +.category .category-name { + pointer-events: none; +} + +.category[selected] { + font-weight: bold; +} + +/** Content area **/ + +.main-content { + flex: 1; +} + +.tab { + padding: 0.5em 0; + overflow-x: auto; +} + +.tab table { + width: 100%; +} + +th, td, table { + border-collapse: collapse; + border: none; + text-align: start; +} + +th { + padding-bottom: 0.5em; + padding-inline: 1em; + font-size: larger; + white-space: nowrap; +} + +td { + padding-bottom: 0.25em; +} diff --git a/toolkit/themes/mobile/global/aboutSupport.css b/toolkit/themes/mobile/global/aboutSupport.css new file mode 100644 index 0000000000..3d057e6c74 --- /dev/null +++ b/toolkit/themes/mobile/global/aboutSupport.css @@ -0,0 +1,93 @@ +/* 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/. */ + +html { + background-color: Field; + color: FieldText; + font: message-box; +} + +body { + width: 90%; + margin-inline: 5%; +} + +.page-subtitle { + margin-bottom: 3em; +} + +.major-section { + margin-block: 2em 1em; + font-size: large; + text-align: start; + font-weight: bold; +} + +#copy-raw-data-to-clipboard, +#copy-to-clipboard { + padding-block: 2%; + margin: 1%; + width: 100%; +} + +table { + background-color: -moz-Dialog; + color: -moz-DialogText; + font: message-box; + font-size: xx-large; + text-align: start; + width: 100%; + border: 1px solid ThreeDShadow; + border-spacing: 0; +} + +th, td { + border: 1px dotted ThreeDShadow; + padding: 3px; +} + +thead th { + text-align: center; +} + +th { + text-align: start; + background-color: Highlight; + color: HighlightText; +} + +th.column { + white-space: nowrap; + width: 0; +} + +td { + text-align: start; + border-top: 1px dotted ThreeDShadow; +} + +.prefs-table { + width: 100%; + table-layout: fixed; +} + +.pref-name { + width: 70%; + white-space: nowrap; + overflow: hidden; +} + +.pref-value { + width: 30%; + white-space: nowrap; + overflow: hidden; +} + +#profile-row { + display: none; +} + +#reset-box { + display: none; +} diff --git a/toolkit/themes/mobile/global/media/TopLevelImageDocument.css b/toolkit/themes/mobile/global/media/TopLevelImageDocument.css new file mode 100644 index 0000000000..5242175161 --- /dev/null +++ b/toolkit/themes/mobile/global/media/TopLevelImageDocument.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/. */ + +@media not print { + /* N.B.: Remember to update ImageDocument.css in the tree or reftests may fail! */ + + body { + color: #eee; + background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); + } + + img.transparent { + background: hsl(0,0%,90%) url("chrome://global/skin/media/imagedoc-lightnoise.png"); + color: #222; + } +} diff --git a/toolkit/themes/mobile/global/media/TopLevelVideoDocument.css b/toolkit/themes/mobile/global/media/TopLevelVideoDocument.css new file mode 100644 index 0000000000..760cdcd538 --- /dev/null +++ b/toolkit/themes/mobile/global/media/TopLevelVideoDocument.css @@ -0,0 +1,12 @@ +/* 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/. */ + +body { + background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); + background-color: rgb(33,33,33); /* Average color of that ^ image. */ +} + +video { + box-shadow: 0 0 15px #000; +} diff --git a/toolkit/themes/mobile/global/media/error.png b/toolkit/themes/mobile/global/media/error.png Binary files differnew file mode 100644 index 0000000000..fc13f5bf98 --- /dev/null +++ b/toolkit/themes/mobile/global/media/error.png diff --git a/toolkit/themes/mobile/global/media/imagedoc-darknoise.png b/toolkit/themes/mobile/global/media/imagedoc-darknoise.png Binary files differnew file mode 100644 index 0000000000..5c33e24d4c --- /dev/null +++ b/toolkit/themes/mobile/global/media/imagedoc-darknoise.png diff --git a/toolkit/themes/mobile/global/media/imagedoc-lightnoise.png b/toolkit/themes/mobile/global/media/imagedoc-lightnoise.png Binary files differnew file mode 100644 index 0000000000..1fe5b3a586 --- /dev/null +++ b/toolkit/themes/mobile/global/media/imagedoc-lightnoise.png diff --git a/toolkit/themes/mobile/global/media/throbber.png b/toolkit/themes/mobile/global/media/throbber.png Binary files differnew file mode 100644 index 0000000000..8e49fe5b2a --- /dev/null +++ b/toolkit/themes/mobile/global/media/throbber.png diff --git a/toolkit/themes/mobile/global/scrollbars.css b/toolkit/themes/mobile/global/scrollbars.css new file mode 100644 index 0000000000..7ae8bced9d --- /dev/null +++ b/toolkit/themes/mobile/global/scrollbars.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.w3.org/1999/xhtml"); +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* Style the scrollbars */ +xul|scrollbar[root="true"] { + position: relative; + z-index: 2147483647; +} + +xul|scrollbar { + appearance: none; + pointer-events: none; + display: block; +} + +/* We don't show resizers on android, so they may as well have + * pointer-events: none to simplify scrollbar caching */ +xul|resizer, +xul|scrollcorner { + pointer-events: none; +} + +xul|scrollbar[orient="vertical"] { + min-width: 6px; + max-width: 6px; +} + +xul|scrollbar[orient="vertical"] xul|thumb { + appearance: none; + max-width: 2px; + min-width: 2px; +} + +xul|scrollbar[orient="horizontal"] { + min-height: 6px; + max-height: 6px; +} + +xul|scrollbar[orient="horizontal"] xul|thumb { + appearance: none; + max-height: 2px; + min-height: 2px; +} + +xul|scrollbar:not([active="true"]), +xul|scrollbar[disabled] { + /* Mac and Windows with overlay scrollbars use visibility: hidden here, but + * that breaks the scrollbar style caching, see bug 1620866. */ + opacity: 0; +} + +xul|scrollbarbutton { + appearance: none; + min-height: 6px; + min-width: 6px; + visibility: hidden; +} + +xul|scrollbarbutton[sbattr="scrollbar-up-top"] { + display: none; +} + +xul|scrollbar xul|thumb { + background-color: rgba(119, 119, 119, 0.4); + border-radius: 4px; +} + +select:not([size], [multiple]) > xul|scrollbar, +select[size="1"] > xul|scrollbar, +select:not([size], [multiple]) > xul|scrollbar > xul|scrollbarbutton, +select[size="1"] > xul|scrollbar > xul|scrollbarbutton { + display: block; + margin-left: 0; + min-width: 16px; +} diff --git a/toolkit/themes/mobile/jar.mn b/toolkit/themes/mobile/jar.mn new file mode 100644 index 0000000000..ac244443ba --- /dev/null +++ b/toolkit/themes/mobile/jar.mn @@ -0,0 +1,33 @@ +# 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/. + +toolkit.jar: +% skin global classic/1.0 %skin/classic/global/ +# These are the CSS files that must exist + skin/classic/global/about.css (global/about.css) + skin/classic/global/aboutMemory.css (global/aboutMemory.css) + skin/classic/global/aboutNetworking.css (global/aboutNetworking.css) + skin/classic/global/aboutSupport.css (global/aboutSupport.css) + skin/classic/global/scrollbars.css (global/scrollbars.css) + + skin/classic/global/media/TopLevelImageDocument.css (global/media/TopLevelImageDocument.css) + skin/classic/global/media/TopLevelVideoDocument.css (global/media/TopLevelVideoDocument.css) + skin/classic/global/media/imagedoc-lightnoise.png (global/media/imagedoc-lightnoise.png) + skin/classic/global/media/imagedoc-darknoise.png (global/media/imagedoc-darknoise.png) + +* skin/classic/global/media/videocontrols.css (../shared/media/videocontrols.css) + skin/classic/global/media/pauseButton.svg (../shared/media/pauseButton.svg) + skin/classic/global/media/playButton.svg (../shared/media/playButton.svg) + skin/classic/global/media/error.png (../shared/media/error.png) + skin/classic/global/media/throbber.png (../shared/media/throbber.png) + skin/classic/global/media/stalled.png (../shared/media/stalled.png) + skin/classic/global/media/audioMutedButton.svg (../shared/media/audioMutedButton.svg) + skin/classic/global/media/audioNoAudioButton.svg (../shared/media/audioNoAudioButton.svg) + skin/classic/global/media/audioUnmutedButton.svg (../shared/media/audioUnmutedButton.svg) + skin/classic/global/media/castingButton-ready.svg (../shared/media/castingButton-ready.svg) + skin/classic/global/media/castingButton-active.svg (../shared/media/castingButton-active.svg) + skin/classic/global/media/closedCaptionButton-cc-off.svg (../shared/media/closedCaptionButton-cc-off.svg) + skin/classic/global/media/closedCaptionButton-cc-on.svg (../shared/media/closedCaptionButton-cc-on.svg) + skin/classic/global/media/fullscreenEnterButton.svg (../shared/media/fullscreenEnterButton.svg) + skin/classic/global/media/fullscreenExitButton.svg (../shared/media/fullscreenExitButton.svg) diff --git a/toolkit/themes/mobile/moz.build b/toolkit/themes/mobile/moz.build new file mode 100644 index 0000000000..d988c0ff9b --- /dev/null +++ b/toolkit/themes/mobile/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/moz.build b/toolkit/themes/moz.build new file mode 100644 index 0000000000..ac0a9798bb --- /dev/null +++ b/toolkit/themes/moz.build @@ -0,0 +1,31 @@ +# -*- 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/. + +# Theme Selection +# +# Shared (toolkit/themes/shared/) is always included. +# +# MacOS X osx (toolkit/themes/osx) +# Windows windows (toolkit/themes/windows) + +# non-mac (toolkit/themes/shared/non-mac) +# GNOME/Linux linux (toolkit/themes/linux) +# non-mac (toolkit/themes/shared/non-mac) +# mobile native UIs that do not use XUL for UI + +toolkit = CONFIG["MOZ_WIDGET_TOOLKIT"] +app = CONFIG["MOZ_BUILD_APP"] + +if toolkit == "cocoa": + DIRS += ["osx"] +elif toolkit == "gtk": + DIRS += ["linux"] +elif app == "mobile/android": + DIRS += ["mobile"] +else: + DIRS += ["windows"] + +with Files("**"): + BUG_COMPONENT = ("Toolkit", "Themes") diff --git a/toolkit/themes/osx/global/alerts/alert.css b/toolkit/themes/osx/global/alerts/alert.css new file mode 100644 index 0000000000..41356e39e7 --- /dev/null +++ b/toolkit/themes/osx/global/alerts/alert.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/. */ + +%include ../../../shared/alert.inc.css + +#alertNotification { + appearance: none; + background: transparent; +} + +#alertBox { + border: 1px solid ThreeDShadow; + border-radius: 1px; + background-color: -moz-Dialog; + color: -moz-DialogText; +} diff --git a/toolkit/themes/osx/global/arrow/arrow-up.gif b/toolkit/themes/osx/global/arrow/arrow-up.gif Binary files differnew file mode 100644 index 0000000000..b8e09b21b8 --- /dev/null +++ b/toolkit/themes/osx/global/arrow/arrow-up.gif diff --git a/toolkit/themes/osx/global/arrow/panelarrow-horizontal.svg b/toolkit/themes/osx/global/arrow/panelarrow-horizontal.svg new file mode 100644 index 0000000000..114fc2e9a4 --- /dev/null +++ b/toolkit/themes/osx/global/arrow/panelarrow-horizontal.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="10" height="18"> + <path d="M 10,0 L 0,9 10,18 z" fill="context-stroke"/> + <path d="M 10,1 L 1,9 10,17 z" fill="context-fill"/> +</svg>
\ No newline at end of file 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..87a3d3923a --- /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"] { + padding: 0px !important; + color: FieldText; + background-color: Field; + font: icon; + appearance: none; +} + +/* ::::: richlistbox autocomplete ::::: */ + +.autocomplete-richlistbox { + appearance: none; + margin: 0; +} + +.ac-type-icon { + display: none; + width: 16px; + height: 16px; + max-width: 16px; + max-height: 16px; + margin-inline-start: 6px; + margin-inline-end: 6px; +} + +.ac-site-icon { + display: none; + width: 16px; + height: 16px; + max-width: 16px; + max-height: 16px; + margin-inline-start: 6px; + margin-inline-end: 8px; + list-style-image: url("chrome://mozapps/skin/places/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..4b0c231576 --- /dev/null +++ b/toolkit/themes/osx/global/button.css @@ -0,0 +1,68 @@ +/* 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:not([disabled="true"]):hover:active { + color: -moz-mac-buttonactivetext; +} + +/* When the window isn't focused, the default button background isn't drawn, + * so don't change the text color then: */ +button[default="true"]:not([disabled="true"], :-moz-window-inactive) { + color: -moz-mac-defaultbuttontext; +} + +/* Likewise, when active (mousedown) but not hovering, the default button + * background isn't drawn, override the previous selector for that case: */ +button[default="true"]:not(:hover):active { + color: ButtonText; +} + +.button-text { + margin-block: 1px; + margin-inline: 3px 2px; + text-align: center; +} + +button[type="default"] { + font: menu; +} + +/* .......... disabled state .......... */ + +button[disabled="true"] { + color: GrayText; +} + +/* ::::: menu buttons ::::: */ + +.button-menu-dropmarker { + display: none; + appearance: none; +} + +/* ::::: plain buttons ::::: */ + +button.plain { + margin: 0 !important; + padding: 0 !important; +} + +/* ::::: help button ::::: */ + +button[dlgtype="help"] { + appearance: auto; + -moz-default-appearance: -moz-mac-help-button; + width: 20px; +} diff --git a/toolkit/themes/osx/global/checkbox.css b/toolkit/themes/osx/global/checkbox.css new file mode 100644 index 0000000000..d569e6f551 --- /dev/null +++ b/toolkit/themes/osx/global/checkbox.css @@ -0,0 +1,39 @@ +/* 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"); + +checkbox { + appearance: auto; + -moz-default-appearance: checkbox-container; + -moz-box-align: center; + margin: 4px 2px; +} + +.checkbox-icon { + margin-inline-end: 2px; +} + +.checkbox-label { + margin: 1px 0; +} + +/* ..... disabled state ..... */ + +checkbox[disabled="true"] { + color: GrayText; +} + +/* ::::: checkmark image ::::: */ + +.checkbox-check { + appearance: auto; + -moz-default-appearance: checkbox; + margin: 1px 1px 0; + /* vertical-align tells native theming where to snap to. However, this doesn't + * always work reliably because of bug 503833. */ + vertical-align: top; + width: 1.3em; + height: 1.3em; +} diff --git a/toolkit/themes/osx/global/commonDialog.css b/toolkit/themes/osx/global/commonDialog.css new file mode 100644 index 0000000000..f2ff866b39 --- /dev/null +++ b/toolkit/themes/osx/global/commonDialog.css @@ -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/. */ + +#commonDialog { + line-height: 13px; +} + +#infoContainer { + max-width: 33em; +} + +#infoIcon { + margin: 3px 5px 4px; + margin-inline-end: 14px; +} + +#infoTitle, +#infoHeader, +#infoBody { + font: menu; + line-height: 16px; + margin-bottom: 6px; +} + +#infoTitle { + font-weight: bold; +} 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/dirListing/dirListing.css b/toolkit/themes/osx/global/dirListing/dirListing.css new file mode 100644 index 0000000000..ffa87f7442 --- /dev/null +++ b/toolkit/themes/osx/global/dirListing/dirListing.css @@ -0,0 +1,99 @@ +/* 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 { + background-color: -moz-dialog; + color: -moz-dialogtext; + font: message-box; + padding-inline: 2em; +} + +body { + border: 1px solid ThreeDShadow; + border-radius: 10px; + padding: 3em; + min-width: 30em; + max-width: 65em; + margin: 4em auto; + background-color: Field; + color: FieldText; +} + +h1 { + font-size: 160%; + margin: 0 0 .6em; + border-bottom: 1px solid ThreeDLightShadow; + font-weight: normal; +} + +a { + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +/* ensure multiple spaces are shown correctly. */ +td:first-child > a { + white-space: pre; +} + +p { + font-size: 110%; +} + +#UI_goUp { + margin-top: 0; + float: inline-start; +} + +#UI_showHidden { + margin-top: 0; + float: inline-end; +} + +table { + clear: both; + width: 90%; + margin: 0 auto; +} + +thead { + font-size: 130%; +} + +/* last modified */ +th:last-child { + text-align: center; +} + +th:hover > a { + text-decoration: underline; +} + +body > table > tbody > tr:hover { + outline: 1px solid ThreeDLightShadow; + -moz-outline-radius: .3em; +} + +/* let 'Size' and 'Last Modified' take only as much space as they need and 'Name' all the rest */ +td:not(:first-child) { + width: 0; +} + +.up { + padding: 0 .5em; + margin-inline-start: 20px; +} + +.up::before { + margin-inline: -20px 4px; + vertical-align: middle; + content: url(chrome://global/skin/dirListing/up.png); +} + +.dir::before { + content: url(chrome://global/skin/dirListing/folder.png); +} diff --git a/toolkit/themes/osx/global/dirListing/folder.png b/toolkit/themes/osx/global/dirListing/folder.png Binary files differnew file mode 100644 index 0000000000..bc9ffe381e --- /dev/null +++ b/toolkit/themes/osx/global/dirListing/folder.png diff --git a/toolkit/themes/osx/global/dirListing/up.png b/toolkit/themes/osx/global/dirListing/up.png Binary files differnew file mode 100644 index 0000000000..dc92992a92 --- /dev/null +++ b/toolkit/themes/osx/global/dirListing/up.png diff --git a/toolkit/themes/osx/global/dropmarker.css b/toolkit/themes/osx/global/dropmarker.css new file mode 100644 index 0000000000..c506c61276 --- /dev/null +++ b/toolkit/themes/osx/global/dropmarker.css @@ -0,0 +1,12 @@ +/* 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; + /* Cut off inheritance for dropmarkers within other widgets where + -moz-image-region might be set for the primary icon. */ + -moz-image-region: auto; +} diff --git a/toolkit/themes/osx/global/findBar.css b/toolkit/themes/osx/global/findBar.css new file mode 100644 index 0000000000..e53c3510b2 --- /dev/null +++ b/toolkit/themes/osx/global/findBar.css @@ -0,0 +1,86 @@ +/* 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/. */ + +%filter substitution +%define findUiDefaultBorderColor rgba(0,0,0,.35) + +%include ../../shared/findBar.inc.css + +findbar { + background-image: linear-gradient(#e8e8e8, #d0d0d0); + border-top-color: #888; +} + +.findbar-container { + padding-inline-start: 2px; +} + +label.findbar-find-fast { + color: #6d6d6d; + margin: 0; + margin-inline-start: 12px; +} + +label.findbar-find-fast:-moz-lwtheme { + color: inherit; +} + +.findbar-closebutton { + margin-inline: 4px 0; + padding-inline: 0 8px; + border: none; + /* make sure the closebutton is displayed as the first element in the bar: */ + -moz-box-ordinal-group: 0; +} + +.findbar-find-next:not(:-moz-lwtheme), +.findbar-find-previous:not(:-moz-lwtheme), +.findbar-button { + border-style: solid; + border-color: @findUiDefaultBorderColor@; + color: black; + background-image: linear-gradient(#f6f6f6, #e9e9e9); +} + +.findbar-button { + appearance: none; + border-width: 1px; + margin-inline-end: 5px; + padding: 2px 9px; + border-radius: 10000px; +} + +.findbar-find-next:-moz-lwtheme, +.findbar-find-previous:-moz-lwtheme { + border-color: var(--lwt-toolbar-field-border-color, @findUiDefaultBorderColor@); +} + +.findbar-find-next:not(:-moz-lwtheme, [disabled]):hover:active, +.findbar-find-previous:not(:-moz-lwtheme, [disabled]):hover:active, +.findbar-button:not([disabled]):hover:active, +.findbar-button:not([disabled])[checked="true"] { + background-image: linear-gradient(#dadada, #dadada); + box-shadow: 0 1px rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.2); +} + +html|input.findbar-textbox { + border: 1px solid var(--lwt-toolbar-field-border-color, @findUiDefaultBorderColor@); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.8; + background-image: url("chrome://global/skin/icons/search-textbox.svg"); + background-repeat: no-repeat; + background-position: 5px center; + margin: 0; + padding-inline-start: 19px; +} + +html|input.findbar-textbox:focus { + box-shadow: 0 0 0 1px var(--toolbar-field-focus-border-color) inset, + 0 0 0 1px var(--toolbar-field-focus-border-color); +} + +html|input.findbar-textbox:-moz-locale-dir(rtl) { + background-position-x: right 5px; +} diff --git a/toolkit/themes/osx/global/global.css b/toolkit/themes/osx/global/global.css new file mode 100644 index 0000000000..c9c70189b9 --- /dev/null +++ b/toolkit/themes/osx/global/global.css @@ -0,0 +1,167 @@ +% 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/global.inc.css + +:root { + /* ::::: Variables ::::: */ + --arrowpanel-padding: 16px; + --default-arrowpanel-background: #fff; + --default-arrowpanel-color: hsl(0,0%,10%); + --default-arrowpanel-border-color: hsla(210,4%,10%,.05); + --arrowpanel-background: var(--default-arrowpanel-background); + --arrowpanel-color: var(--default-arrowpanel-color); + --arrowpanel-border-color: var(--default-arrowpanel-border-color); + --arrowpanel-border-radius: 3.5px; + --panel-disabled-color: GrayText; + --panel-description-color: hsl(0,0%,50%); + + --focus-ring-box-shadow: 0 0 0 1px -moz-mac-focusring inset, 0 0 0 1px -moz-mac-focusring; + /* ::::: 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"); +} + +/* ::::: iframe ::::: */ + +xul|iframe { + border: none; + width: 100px; + height: 100px; + min-width: 10px; + min-height: 10px; +} + +@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") { + /* In emulation, <iframe> is block instead of inline, so reset the width/height */ + xul|iframe { + width: auto; + height: auto; + } +} + +/* ::::: Miscellaneous formatting ::::: */ + +:root:-moz-lwtheme { + appearance: none; +} + +:root[lwtheme-image]:-moz-lwtheme-darktext { + text-shadow: 0 -0.5px 1.5px white; +} + +:root[lwtheme-image]:-moz-lwtheme-brighttext { + text-shadow: 1px 1px 1.5px black; +} + +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; +} + +xul|description, +xul|label { + cursor: default; + margin-block: 1px 2px; + margin-inline: 6px 5px; +} + +xul|description { + margin-bottom: 4px; +} + +xul|label[disabled="true"] { + color: GrayText; +} + +.tooltip-label { + margin: 0; +} + +.header { + font-weight: bold; +} + +.indent { + margin-inline-start: 23px; +} + +.box-padded { + padding: 5px; +} + +.text-link { + color: -moz-nativehyperlinktext; + cursor: pointer; +} + +.text-link:hover { + text-decoration: underline; +} + +.text-link:-moz-focusring { + box-shadow: var(--focus-ring-box-shadow); +} + +html|input { + margin: 4px; +} + +xul|popupnotificationcontent { + margin-top: .5em; +} + +%include ../../shared/notification-popup.inc.css diff --git a/toolkit/themes/osx/global/icons/blocklist_favicon.png b/toolkit/themes/osx/global/icons/blocklist_favicon.png Binary files differnew file mode 100644 index 0000000000..3849ef8704 --- /dev/null +++ b/toolkit/themes/osx/global/icons/blocklist_favicon.png 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/sslWarning.png b/toolkit/themes/osx/global/icons/sslWarning.png Binary files differnew file mode 100644 index 0000000000..6ddd429d6e --- /dev/null +++ b/toolkit/themes/osx/global/icons/sslWarning.png 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..4dc76d235c --- /dev/null +++ b/toolkit/themes/osx/global/in-content/common.css @@ -0,0 +1,90 @@ +/* - 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/in-content/common.inc.css + +xul|tabs { + padding-inline: 0; + position: static; +} + +xul|tab[visuallyselected] { + color: inherit !important; + text-shadow: none; +} + +xul|button[dlgtype="help"] { + appearance: none; + width: auto; +} + +xul|menulist > xul|menupopup > xul|menuitem[checked="true"]::before, +xul|menulist > xul|menupopup > xul|menuitem[selected="true"]::before { + display: none; +} + +xul|menulist::part(dropmarker) { + display: -moz-box; + margin-block: 1px; +} + +xul|menulist > xul|menupopup xul|menu, +xul|menulist > xul|menupopup xul|menuitem { + padding-inline-end: 34px; +} + +xul|*.help-button > xul|*.button-box > xul|*.button-icon { + margin-inline-start: 0; +} + +xul|*.checkbox-icon, +xul|*.radio-icon { + margin-inline-end: 0; +} + +xul|*.text-link:-moz-focusring { + color: var(--in-content-link-highlight); + text-decoration: underline; + box-shadow: none; +} + +xul|checkbox:-moz-focusring > .checkbox-check, +html|input[type="checkbox"]:-moz-focusring + html|label:before, +xul|radio[focused="true"] > .radio-check, +xul|tab:-moz-focusring > .tab-middle > .tab-text { + outline: 2px solid rgba(0,149,221,0.5); + outline-offset: 1px; + -moz-outline-radius: 2px; +} + +xul|radio[focused="true"] > .radio-check { + -moz-outline-radius: 100%; +} + +xul|search-textbox { + appearance: none; + padding-inline: 8px; +} + +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/in-content/info-pages.css b/toolkit/themes/osx/global/in-content/info-pages.css new file mode 100644 index 0000000000..bdfec2d284 --- /dev/null +++ b/toolkit/themes/osx/global/in-content/info-pages.css @@ -0,0 +1,5 @@ +/* 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/in-content/info-pages.inc.css diff --git a/toolkit/themes/osx/global/jar.mn b/toolkit/themes/osx/global/jar.mn new file mode 100644 index 0000000000..bcc52685c1 --- /dev/null +++ b/toolkit/themes/osx/global/jar.mn @@ -0,0 +1,47 @@ +# 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/jar.inc.mn + +toolkit.jar: + skin/classic/global/autocomplete.css + skin/classic/global/button.css + skin/classic/global/checkbox.css + skin/classic/global/commonDialog.css + skin/classic/global/dialog.css + skin/classic/global/dropmarker.css +* skin/classic/global/findBar.css +* skin/classic/global/global.css +* skin/classic/global/menu.css + skin/classic/global/menulist.css + skin/classic/global/netError.css + skin/classic/global/popup.css +* skin/classic/global/popupnotification.css + skin/classic/global/radio.css + skin/classic/global/richlistbox.css + skin/classic/global/scrollbars.css (nativescrollbars.css) + skin/classic/global/search-textbox.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/tooltip.css +* skin/classic/global/tree.css + skin/classic/global/wizard.css +* skin/classic/global/alerts/alert.css (alerts/alert.css) + skin/classic/global/arrow/panelarrow-horizontal.svg (arrow/panelarrow-horizontal.svg) + skin/classic/global/arrow/panelarrow-vertical.svg (arrow/panelarrow-vertical.svg) + skin/classic/global/dirListing/dirListing.css (dirListing/dirListing.css) + skin/classic/global/dirListing/folder.png (dirListing/folder.png) + skin/classic/global/dirListing/up.png (dirListing/up.png) + skin/classic/global/icons/blocklist_favicon.png (icons/blocklist_favicon.png) + 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/icons/sslWarning.png (icons/sslWarning.png) +* skin/classic/global/in-content/common.css (in-content/common.css) +* skin/classic/global/in-content/info-pages.css (in-content/info-pages.css) diff --git a/toolkit/themes/osx/global/menu.css b/toolkit/themes/osx/global/menu.css new file mode 100644 index 0000000000..efd610f9d9 --- /dev/null +++ b/toolkit/themes/osx/global/menu.css @@ -0,0 +1,172 @@ +/* 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"); + +menu, +menuitem, +menucaption { + appearance: auto; + -moz-default-appearance: menuitem; + -moz-font-smoothing-background-color: -moz-mac-menuitem; + -moz-box-align: center; + list-style-image: none; + -moz-image-region: auto; + padding: 0 21px 2px; +} + +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; + -moz-box-pack: 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 { + 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: Highlight; +} + +menuitem[customoptionstyling="true"] { + appearance: none; +} + +/* menu/menuitems in menulist popups */ + +menulist > menupopup { + font: inherit; +} + +menulist > menupopup > menuitem, +menulist > menupopup > menucaption, +menulist > menupopup > menu { + max-width: none; + color: FieldText; +} + +/* checked menuitems */ + +:not(menulist) > menupopup > menuitem[checked="true"], +:not(menulist) > menupopup > menuitem[selected="true"] { + appearance: auto; + -moz-default-appearance: checkmenuitem; +} + +menulist > menupopup > menuitem[checked="true"]::before, +menulist > menupopup > menuitem[selected="true"]::before { + content: '\2713'; /* a checkmark */ + display: block; + width: 15px; + margin-inline-start: -15px; +} + +/* menuseparator */ + +menuseparator { + appearance: auto; + -moz-default-appearance: menuseparator; + margin: 5px 0; + padding: 1px 0; +} + +%include ../../shared/menu-scrolling.inc.css diff --git a/toolkit/themes/osx/global/menulist.css b/toolkit/themes/osx/global/menulist.css new file mode 100644 index 0000000000..98133a8a0b --- /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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +:host { + appearance: auto; + -moz-default-appearance: menulist; + margin: 5px 2px 3px; + min-height: 20px; + color: -moz-DialogText; + text-shadow: none; +} + +:host([disabled="true"]) { + color: GrayText; +} + +:host([disabled="true"]) > dropmarker { + padding-inline-start: 7px !important; +} + +/* Label box */ + +#label-box { + appearance: auto; + -moz-default-appearance: menulist-text; + -moz-box-align: center; + -moz-box-pack: center; + margin-bottom: 1px; +} + +/* Labels */ + +label { + margin: 1px 3px !important; +} + +#highlightable-label:not([highlightable="true"]), +#label[highlightable="true"] { + display: none; +} + +/* Dropmarker */ + +dropmarker { + 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/nativescrollbars.css b/toolkit/themes/osx/global/nativescrollbars.css new file mode 100644 index 0000000000..d8f5a78e1d --- /dev/null +++ b/toolkit/themes/osx/global/nativescrollbars.css @@ -0,0 +1,93 @@ +/* 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"); + +scrollbar { + appearance: auto; + -moz-default-appearance: scrollbar-horizontal; + cursor: default; + background-color: white; +} + +scrollbar[root="true"] { + position: relative; + z-index: 2147483647; /* largest positive value of a signed 32-bit integer */ +} + +html|select[size]:not([size="0"], [size="1"]), +html|select[multiple] { + scrollbar-width: thin; +} + +@media all and (-moz-overlay-scrollbars) { + scrollbar:not([active="true"]), + scrollbar[disabled="true"] { + visibility: hidden; + } +} + +scrollbar[orient="vertical"] { + appearance: auto; + -moz-default-appearance: scrollbar-vertical; +} + +/* ..... track ..... */ + +slider { + appearance: auto; + -moz-default-appearance: scrollbartrack-horizontal; +} + +slider[orient="vertical"] { + appearance: auto; + -moz-default-appearance: scrollbartrack-vertical; +} + +/* ..... thumb ..... */ + +thumb[orient="vertical"] { + appearance: auto; + -moz-default-appearance: scrollbarthumb-vertical; +} + +thumb[orient="horizontal"] { + appearance: auto; + -moz-default-appearance: scrollbarthumb-horizontal; +} + +/* ..... increment ..... */ + +scrollbarbutton[type="increment"] { + appearance: auto; + -moz-default-appearance: scrollbarbutton-right; +} + +scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] { + appearance: auto; + -moz-default-appearance: scrollbarbutton-down; +} + +/* ..... decrement ..... */ + +scrollbarbutton[type="decrement"] { + appearance: auto; + -moz-default-appearance: scrollbarbutton-left; +} + +scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] { + appearance: auto; + -moz-default-appearance: scrollbarbutton-up; +} + +/* ::::: square at the corner of two scrollbars ::::: */ + +scrollcorner { + appearance: auto; + -moz-default-appearance: scrollcorner; + width: 16px; + cursor: default; + background-color: white; +} diff --git a/toolkit/themes/osx/global/netError.css b/toolkit/themes/osx/global/netError.css new file mode 100644 index 0000000000..f5fa76a3bb --- /dev/null +++ b/toolkit/themes/osx/global/netError.css @@ -0,0 +1,103 @@ +/* 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/. */ + +/* + * This defines the look-and-feel styling of the error pages. + * (see: netError.xhtml) + * + * Original styling by William Price <bugzilla@mob.rice.edu> + * Updated by: Steven Garrity <steven@silverorange.com> + * Henrik Skupin <mozilla@hskupin.info> + */ + +html { + background: -moz-Dialog; +} + +body { + margin: 0; + padding: 0 1em; + color: FieldText; + font: message-box; +} + +h1 { + margin: 0 0 .6em 0; + border-bottom: 1px solid ThreeDLightShadow; + font-size: 160%; +} + +ul, ol { + margin: 0; + margin-inline-start: 1.5em; + padding: 0; +} + +ul > li, +ol > li { + margin-bottom: .5em; +} + +ul { + list-style: square; +} + +#errorPageContainer { + position: relative; + min-width: 13em; + max-width: 52em; + margin: 4em auto; + border: 1px solid ThreeDShadow; + border-radius: 10px; + padding: 3em; + padding-inline-start: 30px; + background: url("chrome://global/skin/icons/warning-large.png") left 0 no-repeat Field; + background-origin: content-box; +} + +#errorPageContainer.certerror { + background-image: url("chrome://global/skin/icons/sslWarning.png"); +} + +#errorPageContainer:dir(rtl) { + background-position: right 0; +} + +#errorLongContent, +#errorTitle { + margin-inline-start: 80px; +} + +#errorShortDesc > p { + overflow: auto; + border-bottom: 1px solid ThreeDLightShadow; + padding-bottom: 1em; + font-size: 130%; + white-space: pre-wrap; +} + +#errorLongDesc { + padding-inline-end: 3em; + font-size: 110%; +} + +#errorTryAgain { + margin-top: 2em; + margin-inline-start: 80px; +} + +#errorContainer { + display: none; +} + +#securityOverrideDiv { + padding-top: 10px; +} + +#securityOverrideContent { + background-color: #FFF090; /* Pale yellow */ + padding: 10px; + border-radius: 10px; + display: none; +} diff --git a/toolkit/themes/osx/global/popup.css b/toolkit/themes/osx/global/popup.css new file mode 100644 index 0000000000..0888d8647b --- /dev/null +++ b/toolkit/themes/osx/global/popup.css @@ -0,0 +1,117 @@ +/* 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; + -moz-font-smoothing-background-color: -moz-mac-menupopup; + background-color: Menu; + color: MenuText; +} + +menupopup > menu > menupopup { + margin-top: -4px; +} + +.menupopup-arrowscrollbox { + padding: 4px 0; +} + +panel[titlebar] { + appearance: none; /* to disable rounded corners */ +} + +panel[type="arrow"] { + appearance: none; + background: transparent; +} + +panel[type="arrow"][side="top"], +panel[type="arrow"][side="bottom"] { + margin-inline: -25px; +} + +panel[type="arrow"][side="left"], +panel[type="arrow"][side="right"] { + margin-block: -25px; +} + +.panel-arrowcontent { + appearance: none; + -moz-font-smoothing-background-color: var(--arrowpanel-background); + background: var(--arrowpanel-background); + border-radius: var(--arrowpanel-border-radius); + box-shadow: 0 0 0 1px var(--arrowpanel-border-color); + color: var(--arrowpanel-color); + border: none; + padding: var(--arrowpanel-padding); + margin: 1px; +} + +.panel-arrowcontent > html|slot { + /* propagate border-radius from arrowcontent to slotted children */ + border-radius: inherit; +} + +:host([orient=vertical]) .panel-arrowcontent { + -moz-box-orient: vertical; +} + +panel[type="arrow"].panel-no-padding::part(arrowcontent) { + padding: 0; + overflow: hidden; /* Don't let panel content overflow the border-radius */ +} + +:is(panel, menupopup)::part(arrow) { + -moz-context-properties: fill, stroke; + fill: var(--arrowpanel-background); + stroke: var(--arrowpanel-border-color); +} + +:is(panel, menupopup)[side="top"]::part(arrow) { + list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg"); + margin-inline: 16px; + margin-bottom: -1px; +} + +:is(panel, menupopup)[side="bottom"]::part(arrow) { + list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg"); + -moz-transform: scaleY(-1); + margin-inline: 16px; + margin-top: -1px; +} + +:is(panel, menupopup)[side="left"]::part(arrow) { + list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg"); + margin-block: 16px; + margin-right: -1px; +} + +:is(panel, menupopup)[side="right"]::part(arrow) { + list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg"); + transform: scaleX(-1); + margin-block: 16px; + margin-left: -1px; +} + +/* rules for popups associated with menulists */ + +menulist > menupopup { + min-width: 0; + 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/popupnotification.css b/toolkit/themes/osx/global/popupnotification.css new file mode 100644 index 0000000000..06908b1033 --- /dev/null +++ b/toolkit/themes/osx/global/popupnotification.css @@ -0,0 +1,10 @@ +%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 +%include ../../shared/popupnotification.inc.css + +.popup-notification-secondary-button:not([hidden="true"]) ~ .popup-notification-primary-button:not([default]) { + border-inline-start: 1px solid var(--panel-separator-color); +} diff --git a/toolkit/themes/osx/global/radio.css b/toolkit/themes/osx/global/radio.css new file mode 100644 index 0000000000..2b291773ac --- /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; + -moz-box-align: 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..50b37c1821 --- /dev/null +++ b/toolkit/themes/osx/global/richlistbox.css @@ -0,0 +1,47 @@ +/* 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; + overflow: auto; +} + +richlistbox[disabled="true"] { + color: GrayText; +} + +richlistitem[selected="true"] { + background-color: -moz-Dialog; + color: -moz-DialogText; +} + +richlistbox:focus > richlistitem[selected="true"] { + background-color: Highlight; + color: HighlightText; +} + +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/search-textbox.css b/toolkit/themes/osx/global/search-textbox.css new file mode 100644 index 0000000000..634a05b46c --- /dev/null +++ b/toolkit/themes/osx/global/search-textbox.css @@ -0,0 +1,57 @@ +/* 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 { + appearance: auto; + -moz-default-appearance: searchfield; + font-size: 12px; + cursor: text; + margin: 4px; /* matches <input> global.css margin */ + padding: 1px; + background-color: Field; + color: FieldText; +} + +html|input { + border: none; + padding: 0 1px; + background-color: transparent; + outline: none; + color: inherit; + font: inherit; + text-shadow: inherit; + box-sizing: border-box; + -moz-box-flex: 1; + text-align: inherit; +} + +:host([readonly="true"]) { + background-color: -moz-Dialog; + color: -moz-DialogText; +} + +:host([disabled="true"]) { + cursor: default; + background-color: -moz-Dialog; + color: GrayText; +} + +/* ::::: icons ::::: */ + +.textbox-search-clear { + list-style-image: url(chrome://global/skin/icons/searchfield-cancel.svg); + margin-bottom: 1px; +} + +.textbox-search-clear:not([disabled]) { + cursor: default; +} + +/* Don't leave extra blank space with long placeholders (see bug 1385902) */ +.textbox-search-icons:not([selectedIndex="1"]) { + display: none; +} diff --git a/toolkit/themes/osx/global/splitter.css b/toolkit/themes/osx/global/splitter.css new file mode 100644 index 0000000000..8a9680851c --- /dev/null +++ b/toolkit/themes/osx/global/splitter.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"); + +/* ::::: splitter (vertical) ::::: */ + +splitter { + -moz-box-align: center; + -moz-box-pack: 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-width: 0px; + 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..5bcd641d64 --- /dev/null +++ b/toolkit/themes/osx/global/tabbox.css @@ -0,0 +1,61 @@ +/* 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 { + -moz-box-align: center; + font: menu; + padding: 0 10px; + margin-bottom: -12px; + position: relative; +} + +tab { + appearance: auto; + -moz-default-appearance: tab; + padding-top: 1px; +} + +tab:-moz-focusring { + /* Tab focus rings need to overlay adjacent tabs. */ + position: relative; +} + +tab:first-of-type { + padding-inline-start: 2px; +} + +tab:last-of-type { + padding-inline-end: 2px; +} + +tab[visuallyselected="true"]:not(:-moz-window-inactive) { + color: #FFF; +} + +.tab-middle { + padding: 1px 6px 2px; +} + +.tabs-left, +.tabs-right { + -moz-box-flex: 1; +} diff --git a/toolkit/themes/osx/global/tabprompts.css b/toolkit/themes/osx/global/tabprompts.css new file mode 100644 index 0000000000..8e6164c389 --- /dev/null +++ b/toolkit/themes/osx/global/tabprompts.css @@ -0,0 +1,63 @@ +/* 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%; +} + +.paymentDialogContainerFrame, +.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 { + box-shadow: var(--focus-ring-box-shadow) +} 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..90c346456e --- /dev/null +++ b/toolkit/themes/osx/global/toolbarbutton.css @@ -0,0 +1,66 @@ +/* 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 { + -moz-box-align: center; + -moz-box-pack: center; + margin: 0 2px; + padding: 3px 2px; + background-color: transparent; +} + +.toolbarbutton-text { + margin: 0; + padding: 0; + text-align: center; + vertical-align: middle; +} + +toolbarbutton[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-dropdown-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: -6px 0 0 !important; + margin-inline-end: -6px !important; + min-width: 14px; + max-width: 24px; + line-height: 10px; + text-align: center; + align-self: start; + justify-self: end; +} + +toolbar[mode="icons"] > *|* > .toolbarbutton-badge { + margin-inline-end: -10px !important; +} + +toolbarbutton.tabbable { + -moz-user-focus: normal !important; +} diff --git a/toolkit/themes/osx/global/tooltip.css b/toolkit/themes/osx/global/tooltip.css new file mode 100644 index 0000000000..49d9de9de4 --- /dev/null +++ b/toolkit/themes/osx/global/tooltip.css @@ -0,0 +1,22 @@ +/* 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/. */ + +/* + * This file is imported as a UA stylesheet because the default tooltip is + * built as native anonymous content. + */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +tooltip { + appearance: auto; + -moz-default-appearance: tooltip; + -moz-font-smoothing-background-color: -moz-mac-tooltip; + margin-top: 18px; + padding: 2px 3px; + max-width: 40em; + color: InfoText; + font: message-box; + cursor: default; +} diff --git a/toolkit/themes/osx/global/tree.css b/toolkit/themes/osx/global/tree.css new file mode 100644 index 0000000000..4c63dfbd26 --- /dev/null +++ b/toolkit/themes/osx/global/tree.css @@ -0,0 +1,14 @@ +/* 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/tree.inc.css + + +/* ::::: editable tree ::::: */ + +html|input.tree-input { + appearance: none; + border-width: 0; + box-shadow: var(--focus-ring-box-shadow); +} diff --git a/toolkit/themes/osx/global/wizard.css b/toolkit/themes/osx/global/wizard.css new file mode 100644 index 0000000000..77ed1f6f4e --- /dev/null +++ b/toolkit/themes/osx/global/wizard.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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +:host { + padding: 14px; +} + +.wizard-header { + appearance: auto; + -moz-default-appearance: dialog; +} + +.wizard-header-box-1 { + color: #000; +} + +.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; +} + +.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; +} diff --git a/toolkit/themes/osx/moz.build b/toolkit/themes/osx/moz.build new file mode 100644 index 0000000000..096017b685 --- /dev/null +++ b/toolkit/themes/osx/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/. + +DIRS += ["global", "mozapps"] diff --git a/toolkit/themes/osx/mozapps/downloads/unknownContentType.css b/toolkit/themes/osx/mozapps/downloads/unknownContentType.css new file mode 100644 index 0000000000..767d5934df --- /dev/null +++ b/toolkit/themes/osx/mozapps/downloads/unknownContentType.css @@ -0,0 +1,27 @@ +/* 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/. */ + +#unknownContentType { + font: menu; +} + +description { + font-weight: bold; +} + +#contentTypeImage { + margin-inline-end: 3px; + width: 16px; +} + +#type { + -moz-box-flex: 1; + background-color: transparent; + color: inherit; +} + +#container > .small-indent, +.small-indent label { + margin-inline-start: 0; +} diff --git a/toolkit/themes/osx/mozapps/extensions/blocklist.css b/toolkit/themes/osx/mozapps/extensions/blocklist.css new file mode 100644 index 0000000000..02f6e1d494 --- /dev/null +++ b/toolkit/themes/osx/mozapps/extensions/blocklist.css @@ -0,0 +1,20 @@ +/* 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/. */ + +richlistitem { + padding-top: 6px; + padding-bottom: 6px; + padding-inline-start: 7px; + padding-inline-end: 7px; + border-bottom: 1px solid #C0C0C0; +} + +.addon-name-version { + font-size: 110%; +} + +.blockedLabel { + font-weight: bold; + font-style: italic; +} diff --git a/toolkit/themes/osx/mozapps/handling/handling.css b/toolkit/themes/osx/mozapps/handling/handling.css new file mode 100644 index 0000000000..8aa9db58b8 --- /dev/null +++ b/toolkit/themes/osx/mozapps/handling/handling.css @@ -0,0 +1,25 @@ +/* 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/. */ + +richlistitem[type] { + min-height: 36px; /* Don't forget to update the richlistbox height! */ + padding-inline-start: 2px; + } + +richlistitem { + -moz-box-align: center; +} + +richlistbox { + /* 3 items high, plus 4px for top and bottom margins, less 2px for border */ + min-height: 110px; +} + +.name { + font-weight: bold; +} + +.description { + color: GrayText; +} diff --git a/toolkit/themes/osx/mozapps/jar.mn b/toolkit/themes/osx/mozapps/jar.mn new file mode 100644 index 0000000000..0818a08355 --- /dev/null +++ b/toolkit/themes/osx/mozapps/jar.mn @@ -0,0 +1,11 @@ +# 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/. + +toolkit.jar: +#include ../../shared/mozapps.inc.mn + skin/classic/mozapps/downloads/unknownContentType.css (downloads/unknownContentType.css) + skin/classic/mozapps/extensions/blocklist.css (extensions/blocklist.css) + skin/classic/mozapps/profile/profileSelection.css (profile/profileSelection.css) + skin/classic/mozapps/update/updates.css (update/updates.css) + skin/classic/mozapps/handling/handling.css (handling/handling.css) diff --git a/toolkit/themes/osx/mozapps/moz.build b/toolkit/themes/osx/mozapps/moz.build new file mode 100644 index 0000000000..d988c0ff9b --- /dev/null +++ b/toolkit/themes/osx/mozapps/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/mozapps/profile/profileSelection.css b/toolkit/themes/osx/mozapps/profile/profileSelection.css new file mode 100644 index 0000000000..f18c245174 --- /dev/null +++ b/toolkit/themes/osx/mozapps/profile/profileSelection.css @@ -0,0 +1,20 @@ +/* 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.css"); + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +box#managebuttons > button { + min-width: 8em; +} + +#managebuttons { + padding-top: 1em; +} + +#profiles { + height: 12em; +} diff --git a/toolkit/themes/osx/mozapps/update/updates.css b/toolkit/themes/osx/mozapps/update/updates.css new file mode 100644 index 0000000000..eee3db4450 --- /dev/null +++ b/toolkit/themes/osx/mozapps/update/updates.css @@ -0,0 +1,104 @@ +/* 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/. */ + +/* Elevation Dialog */ +/* Specify the size for the UI so it has a fixed size. 3rd + party themes should typically specify the same values. */ +#elevationBox, .update-content { + height: 360px; + width: 700px; +} + +/* Remove margin and padding so the inner UI will extend to the edge of the + window. 3rd party themes should typically specify the same values. */ +#updates { + margin: 0; + padding: 0; +} + +.update-header { + appearance: auto; + -moz-default-appearance: dialog; + margin: 12px 12px 0 12px; +} + +.update-header-box-1 { + color: #000; +} + +.update-header-box-text { + margin: 0; + padding: 0; + font: menu; + font-weight: bold; +} + +.update-header-label { + font-weight: bold; +} + +.update-content { + padding: 6px 12px 12px 12px; +} + +.update-buttons-separator { + display: none; +} + +#update-button-box { + padding: 10px 12px 12px 12px; + appearance: auto; + -moz-default-appearance: statusbar; + -moz-window-dragging: drag; +} + +#update-button-box button { + appearance: auto; + -moz-default-appearance: toolbarbutton; + color: ButtonText; + min-height: 22px; +} + +#updateFinishedName { + font-weight: bold; + font-size: larger; +} + +/* Update History Window */ +update { + border-bottom: 1px dotted #C0C0C0; +} + +.update-name { + font-weight: bold; +} + +.update-label-column { + -moz-box-align: end; +} + +.update-type { + font-weight: bold; + color: #990000; +} + +.update-status-value, +.update-installedOn-value { + margin-inline-start: 1ch; +} + +#historyItems { + height: 200px; + margin: 1px 5px 5px 5px; +} + +#historyItems .update { + padding: 5px; + display: -moz-box; + -moz-box-orient: vertical; +} + +.update-name { + -moz-box-flex: 1; +} diff --git a/toolkit/themes/osx/mozapps/viewsource/viewsource.css b/toolkit/themes/osx/mozapps/viewsource/viewsource.css new file mode 100644 index 0000000000..76c7d00b9d --- /dev/null +++ b/toolkit/themes/osx/mozapps/viewsource/viewsource.css @@ -0,0 +1,5 @@ +/* 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/. */ + +/* This is for styling the menus of the viewsource window */ diff --git a/toolkit/themes/osx/reftests/482681-ref.xhtml b/toolkit/themes/osx/reftests/482681-ref.xhtml new file mode 100644 index 0000000000..62fb4bb8d5 --- /dev/null +++ b/toolkit/themes/osx/reftests/482681-ref.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> +<?xml-stylesheet href="data:text/css, +vbox { height: 50px; } +box { + -moz-appearance: button; +} +" type="text/css"?> + +<window title="Reference for mini, small and regular button sizes" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <vbox> + <hbox><box width="79" height="16"/></hbox> + </vbox> + <vbox> + <hbox><box width="79" height="19"/></hbox> + </vbox> + <vbox> + <hbox><box width="79" height="22"/></hbox> + </vbox> +</window> diff --git a/toolkit/themes/osx/reftests/baseline.xhtml b/toolkit/themes/osx/reftests/baseline.xhtml new file mode 100644 index 0000000000..4f65ffed41 --- /dev/null +++ b/toolkit/themes/osx/reftests/baseline.xhtml @@ -0,0 +1,161 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<!-- + * This is a complicated test. + * XUL authors like to place several different widgets on the same line by + * putting them in a <hbox align="center">. In order for this to look good, + * the baselines of the text contained in the widgets should line up. + * This is what this test is testing. + * The test passes if it's completely white. + * + * It works like this: + * For every combination of two different widgets (where widget is one of + * label, radio, checkbox, button, menulist) + * there's a stack with two layers. The back layer in the stack is + * just a vertically centered label with a bunch of underscores. This is the + * baseline that the text on the widgets should hit. + * On the foreground layer in the stack we've placed the pair of widgets we're + * testing. They also have underscores in their labels. + * + * Now we want to test whether the underscores in the foreground layer are directly + * on top of those in the back layer. For that we use color-keying and a tricky + * SVG color transformation. + * The back layer of the stack has a red background; the underscores of the + * back label are in white (and have a white text-shadow in order to fill up the + * gaps between the individual letters). + * Now we want the foreground layer to be solid white, except for those pixels + * that make up the labels: These should be transparent. + * So if the baselines line up, everything is white, since at those pixels where + * the foreground is transparent, only the white pixels from the back layer shine + * through. If the baselines don't line up, red pixels from the background will + * shine through, and the comparison with about:blank (completely white) will fail. + * + * So how do we get the foreground white and transparent? That's the job of the + * SVG color transformation filter. It's a simple matrix that makes turns opaque + * yellow into transparent and all other colors into white. + * --> + +<window title="Baseline test" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + orient="vertical" + class="reftest-wait" + onload="loaded()"> + +<html:style><![CDATA[ +:root { + -moz-appearance: none; + background-color: white; +} +.regular { + font: -moz-dialog; +} +.small { + font: message-box; +} +.spacer { + height: 40px; +} +stack > hbox:first-child { + background: red; + color: white; + text-shadow: 5px 0 white, -5px 0 white; +} +stack > .foreground { + filter: url(#yellow2transparent); +} +stack > hbox:last-child > * { + color: yellow; +} +]]> +</html:style> + + <svg:svg style="visibility: collapse;"> + <svg:filter id="yellow2transparent" color-interpolation-filters="sRGB"> + <svg:feColorMatrix type="matrix" + values="0 0 0 0 1 + 0 0 0 0 1 + 0 0 0 0 1 + -100 -100 100 -100 300"/> + </svg:filter> + </svg:svg> + +<script type="application/javascript"><![CDATA[ + +function cE(elem) { + return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem); +} +function elWithValue(elem, val) { + let e = cE(elem); + e.setAttribute(elem == "label" ? "value" : "label", val); + return e; +} + +function allPairs(set) { + let ps = []; + for(let i = 0; i < set.length; ++i) { + for (let j = i + 1; j < set.length; ++j) { + ps.push([set[i], set[j]]); + } + } + return ps; +} + +function createLabel(v) { + return elWithValue("label", v); +} +function createRadio(v) { + return elWithValue("radio", v); +} +function createCheckbox(v) { + return elWithValue("checkbox", v); +} +function createButton(v) { + return elWithValue("button", v); +} +function createMenulist(v) { + let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)]; + item.setAttribute("selected", "true"); + popup.appendChild(item); + list.appendChild(popup); + return list; +} +function loaded() { + let template = document.getElementById("template"); + ["regular", "small"].forEach(function(size) { + let wrapper = document.querySelectorAll("#wrapper > ." + size)[0]; + allPairs([ + createLabel, createRadio, createCheckbox, createButton, createMenulist, + ]).forEach(function(elemList) { + let newBox = template.cloneNode(true); + newBox.className = "spacer"; + let foregroundRow = newBox.firstChild.lastChild; + elemList.forEach(function(creator) { + foregroundRow.appendChild(creator("______")); + }); + wrapper.appendChild(newBox); + }); + }); + document.documentElement.className = ""; +} + +]]></script> + <vbox id="template"> + <stack> + <hbox align="center"> + <label value="______________________________________________"/> + </hbox> + <hbox align="center" class="foreground"> + </hbox> + </stack> + </vbox> + <hbox id="wrapper"> + <vbox class="regular" flex="1"/> + <vbox class="small" flex="1"/> + </hbox> + + <spacer flex="1"/> + +</window> diff --git a/toolkit/themes/osx/reftests/checkboxsize-ref.xhtml b/toolkit/themes/osx/reftests/checkboxsize-ref.xhtml new file mode 100644 index 0000000000..a4b8675d2f --- /dev/null +++ b/toolkit/themes/osx/reftests/checkboxsize-ref.xhtml @@ -0,0 +1,33 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window title="Reference for mini, small and regular checkbox sizes" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"> + vbox { height: 50px; } + box { + appearance: auto; + -moz-default-appearance: checkbox; + margin-left: 2px; + margin-top: 1px; + } + </style> + <vbox> + <hbox><box width="11" height="11"/></hbox> + </vbox> + <vbox> + <hbox><box width="13" height="13"/></hbox> + </vbox> + <vbox> + <hbox><box width="16" height="16"/></hbox> + </vbox> + <vbox> + <hbox checked="true"><box width="11" height="11"/></hbox> + </vbox> + <vbox> + <hbox checked="true"><box width="13" height="13"/></hbox> + </vbox> + <vbox> + <hbox checked="true"><box width="16" height="16"/></hbox> + </vbox> +</window> diff --git a/toolkit/themes/osx/reftests/checkboxsize.xhtml b/toolkit/themes/osx/reftests/checkboxsize.xhtml new file mode 100644 index 0000000000..55429ef8f8 --- /dev/null +++ b/toolkit/themes/osx/reftests/checkboxsize.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> +<?xml-stylesheet href="data:text/css, +vbox { height: 50px; } +checkbox { + color: transparent; + margin: 0; +} +" type="text/css"?> + +<window title="Checkboxes with mini, small and regular control font" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <vbox style="font-size: 9px"> + <hbox><checkbox label="Mini"/></hbox> + </vbox> + <vbox style="font: message-box"> + <hbox><checkbox label="Small"/></hbox> + </vbox> + <vbox style="font: -moz-dialog"> + <hbox><checkbox label="Regular"/></hbox> + </vbox> + <vbox style="font-size: 9px"> + <hbox><checkbox label="Mini" checked="true"/></hbox> + </vbox> + <vbox style="font: message-box"> + <hbox><checkbox label="Small" checked="true"/></hbox> + </vbox> + <vbox style="font: -moz-dialog"> + <hbox><checkbox label="Regular" checked="true"/></hbox> + </vbox> +</window> diff --git a/toolkit/themes/osx/reftests/nostretch-ref.xhtml b/toolkit/themes/osx/reftests/nostretch-ref.xhtml new file mode 100644 index 0000000000..e06a6ddc1c --- /dev/null +++ b/toolkit/themes/osx/reftests/nostretch-ref.xhtml @@ -0,0 +1,99 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window title="Stretched controls test reference" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + orient="vertical" + class="reftest-wait" + onload="loaded()"> + +<html:style><![CDATA[ +.regular { + font: -moz-dialog; +} +.small { + font: message-box; +} +.spacer { + height: 40px; +} +.foreground > :nth-child(2) { + display: none; /* <----- This is the only difference from nostretch.xhtml */ +} +]]> +</html:style> + +<script type="application/javascript"><![CDATA[ + +function cE(elem) { + return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem); +} +function elWithValue(elem, val) { + let e = cE(elem); + e.setAttribute(elem == "label" ? "value" : "label", val); + return e; +} + +function allPairs(set) { + let ps = []; + for(let i = 0; i < set.length; ++i) { + for (let j = 0; j < set.length; ++j) { + if (i != j) + ps.push([set[i], set[j]]); + } + } + return ps; +} + +function createLabel(v) { + return elWithValue("label", v); +} +function createRadio(v) { + return elWithValue("radio", v); +} +function createCheckbox(v) { + return elWithValue("checkbox", v); +} +function createButton(v) { + return elWithValue("button", v); +} +function createMenulist(v) { + let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)]; + item.setAttribute("selected", "true"); + popup.appendChild(item); + list.appendChild(popup); + return list; +} +function loaded() { + let template = document.getElementById("template"); + ["regular", "small"].forEach(function(size) { + let wrapper = document.querySelectorAll("#wrapper > ." + size)[0]; + allPairs([ + createButton, createMenulist, + ]).forEach(function(elemList) { + let newBox = template.cloneNode(true); + newBox.className = "spacer"; + let foregroundRow = newBox.firstChild; + elemList.forEach(function(creator) { + foregroundRow.appendChild(creator("Label")); + }); + wrapper.appendChild(newBox); + }); + }); + document.documentElement.className = ""; +} + +]]></script> + <vbox id="template"> + <hbox class="foreground"/> + </vbox> + <hbox id="wrapper"> + <vbox class="regular" width="500"/> + <vbox class="small" flex="1"/> + </hbox> + + <spacer flex="1"/> + +</window> diff --git a/toolkit/themes/osx/reftests/nostretch.xhtml b/toolkit/themes/osx/reftests/nostretch.xhtml new file mode 100644 index 0000000000..325c2e593b --- /dev/null +++ b/toolkit/themes/osx/reftests/nostretch.xhtml @@ -0,0 +1,112 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<!-- + * This test tests whether you can put different widgets in the same + * hbox without stretching them, even if you don't set align="center". + * I.e. prior to the fix that added this patch, having a button and a + * menulist in the same hbox next to each other would stretch the menulist + * vertically because the button had such a big vertical margin. + * + * The test works like this: Two widgets are placed in a hbox, and the second + * widget is visibility: hidden. In the reference (nostretch-ref.xhtml), the + * second widget is display: none. If test and reference look the same, + * adding the second widget hasn't affected the appearance of the first widget, + * and everything's fine. + * --> +<window title="Stretched controls test" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + orient="vertical" + class="reftest-wait" + onload="loaded()"> + +<html:style><![CDATA[ +.regular { + font: -moz-dialog; +} +.small { + font: message-box; +} +.spacer { + height: 40px; +} +.foreground > :nth-child(2) { + visibility: hidden; +} +]]> +</html:style> + +<script type="application/javascript"><![CDATA[ + +function cE(elem) { + return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem); +} +function elWithValue(elem, val) { + let e = cE(elem); + e.setAttribute(elem == "label" ? "value" : "label", val); + return e; +} + +function allPairs(set) { + let ps = []; + for(let i = 0; i < set.length; ++i) { + for (let j = 0; j < set.length; ++j) { + if (i != j) + ps.push([set[i], set[j]]); + } + } + return ps; +} + +function createLabel(v) { + return elWithValue("label", v); +} +function createRadio(v) { + return elWithValue("radio", v); +} +function createCheckbox(v) { + return elWithValue("checkbox", v); +} +function createButton(v) { + return elWithValue("button", v); +} +function createMenulist(v) { + let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)]; + item.setAttribute("selected", "true"); + popup.appendChild(item); + list.appendChild(popup); + return list; +} +function loaded() { + let template = document.getElementById("template"); + ["regular", "small"].forEach(function(size) { + let wrapper = document.querySelectorAll("#wrapper > ." + size)[0]; + allPairs([ + createButton, createMenulist, + ]).forEach(function(elemList) { + let newBox = template.cloneNode(true); + newBox.className = "spacer"; + let foregroundRow = newBox.firstChild; + elemList.forEach(function(creator) { + foregroundRow.appendChild(creator("Label")); + }); + wrapper.appendChild(newBox); + }); + }); + document.documentElement.className = ""; +} + +]]></script> + <vbox id="template"> + <hbox class="foreground"/> + </vbox> + <hbox id="wrapper"> + <vbox class="regular" width="500"/> + <vbox class="small" flex="1"/> + </hbox> + + <spacer flex="1"/> + +</window> diff --git a/toolkit/themes/osx/reftests/radiosize-ref.xhtml b/toolkit/themes/osx/reftests/radiosize-ref.xhtml new file mode 100644 index 0000000000..49b5f426d5 --- /dev/null +++ b/toolkit/themes/osx/reftests/radiosize-ref.xhtml @@ -0,0 +1,33 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window title="Reference for mini, small and regular radio button sizes" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"> + vbox { height: 50px; } + box { + appearance: auto; + -moz-default-appearance: radio; + margin-left: 2px; + margin-top: 1px; + } + </style> + <vbox> + <hbox><box width="11" height="11"/></hbox> + </vbox> + <vbox> + <hbox><box width="13" height="13"/></hbox> + </vbox> + <vbox> + <hbox><box width="16" height="16"/></hbox> + </vbox> + <vbox> + <hbox selected="true"><box width="11" height="11"/></hbox> + </vbox> + <vbox> + <hbox selected="true"><box width="13" height="13"/></hbox> + </vbox> + <vbox> + <hbox selected="true"><box width="16" height="16"/></hbox> + </vbox> +</window> diff --git a/toolkit/themes/osx/reftests/radiosize.xhtml b/toolkit/themes/osx/reftests/radiosize.xhtml new file mode 100644 index 0000000000..44f735db07 --- /dev/null +++ b/toolkit/themes/osx/reftests/radiosize.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> +<?xml-stylesheet href="data:text/css, +vbox { height: 50px; } +radio { + color: transparent; + margin: 0; +} +" type="text/css"?> + +<window title="Radio buttons with mini, small and regular control font" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <vbox style="font-size: 9px"> + <hbox><radio label="Mini"/></hbox> + </vbox> + <vbox style="font: message-box"> + <hbox><radio label="Small"/></hbox> + </vbox> + <vbox style="font: -moz-dialog"> + <hbox><radio label="Regular"/></hbox> + </vbox> + <vbox style="font-size: 9px"> + <hbox><radio label="Mini" selected="true"/></hbox> + </vbox> + <vbox style="font: message-box"> + <hbox><radio label="Small" selected="true"/></hbox> + </vbox> + <vbox style="font: -moz-dialog"> + <hbox><radio label="Regular" selected="true"/></hbox> + </vbox> +</window> diff --git a/toolkit/themes/osx/reftests/reftest.list b/toolkit/themes/osx/reftests/reftest.list new file mode 100644 index 0000000000..72b87fae6d --- /dev/null +++ b/toolkit/themes/osx/reftests/reftest.list @@ -0,0 +1,7 @@ +# This folder is registered in the chrome manifest at layout/tools/reftest/jar.mn. + +skip-if(!cocoaWidget) == chrome://reftest/content/osx-theme/radiosize.xhtml chrome://reftest/content/osx-theme/radiosize-ref.xhtml +skip-if(!cocoaWidget) == chrome://reftest/content/osx-theme/checkboxsize.xhtml chrome://reftest/content/osx-theme/checkboxsize-ref.xhtml +# This failure is caused by bug 1586055 in WebRender +skip-if(!cocoaWidget) fails-if(webrender) == chrome://reftest/content/osx-theme/baseline.xhtml about:blank +skip-if(!cocoaWidget) == chrome://reftest/content/osx-theme/nostretch.xhtml chrome://reftest/content/osx-theme/nostretch-ref.xhtml diff --git a/toolkit/themes/shared/about.css b/toolkit/themes/shared/about.css new file mode 100644 index 0000000000..aa89f01e5a --- /dev/null +++ b/toolkit/themes/shared/about.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/. */ + +html { + background: -moz-Dialog; + color: -moz-DialogText; + padding: 0 1em; + font: message-box; + line-height: 1.6em; +} + +body { + position: relative; + min-width: 330px; + max-width: 50em; + margin: 4em auto; + padding-inline-start: 30px; +} + +.aboutPageWideContainer { + max-width: 80%; +} + +h1 { + font-weight: lighter; + font-size: 2.4em; +} + +img { + border: 0; +} + +ul { + margin: 0; + margin-inline-start: 1.5em; + padding: 0; +} + +ul > li { + margin-top: .5em; +} + +th, td { + padding: 0 5px; +} diff --git a/toolkit/themes/shared/aboutCache.css b/toolkit/themes/shared/aboutCache.css new file mode 100644 index 0000000000..7fb6318080 --- /dev/null +++ b/toolkit/themes/shared/aboutCache.css @@ -0,0 +1,70 @@ +/* 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/. */ + +h2 { + margin-top: 2em; +} + +table { + table-layout: fixed; + width: 100%; + margin-bottom: 1em; + padding: 0.5em 0; + border-radius: 10px; +} + +#disk, +#memory, +#offline { + background-color: rgba(0, 0, 0, .1); +} + +th { + width: 14em; + white-space: nowrap; + text-align: end; +} + +td { + font-family: -moz-fixed; + word-wrap: break-word; +} + +#col-key { + width: 60%; +} + +#col-dataSize, +#col-fetchCount, +#col-lastModified, +#col-expires { + width: 13%; +} + +#col-pinned { + width: 5em; +} + +#entries > tbody > tr:nth-child(odd) { + background-color: rgba(0, 0, 0, .03); +} + +#entries > tbody > tr:nth-child(even) { + background-color: rgba(0, 0, 0, .06); +} + +#entries > tbody > tr > td { + padding: .5em 0; + text-align: center; +} + +#entries > thead > tr > th { + text-align: center; + white-space: normal; +} + +#entries > thead > tr > th:first-child, +#entries > tbody > tr > td:first-child { + text-align: start; +} diff --git a/toolkit/themes/shared/aboutCacheEntry.css b/toolkit/themes/shared/aboutCacheEntry.css new file mode 100644 index 0000000000..8c8eb9a970 --- /dev/null +++ b/toolkit/themes/shared/aboutCacheEntry.css @@ -0,0 +1,29 @@ +/* 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/. */ + +body { + display: table; +} + +table { + table-layout: fixed; + width: 100%; +} + +th { + width: 12em; + word-wrap: break-word; + vertical-align: top; + text-align: end; +} + +td { + display: block; + font-family: -moz-fixed; + white-space: pre-wrap; +} + +#td-key { + word-wrap: break-word; +} diff --git a/toolkit/themes/shared/aboutHttpsOnlyError.css b/toolkit/themes/shared/aboutHttpsOnlyError.css new file mode 100644 index 0000000000..323bdb2970 --- /dev/null +++ b/toolkit/themes/shared/aboutHttpsOnlyError.css @@ -0,0 +1,47 @@ +/* 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/. */ + + .title > h2 { + padding: 0; + margin: 0; + font-size: 17px; + font-weight: 500; +} + +.title { + background-image: url("chrome://global/content/httpsonlyerror/secure-broken.svg"); + background-position-y: center; +} + +em { + font-style: normal; + font-weight: 600; +} + +#insecure-explanation-unavailable { + margin-bottom: 0.5em; +} +#learn-more-container { + margin-block: 0 2em; +} +#explanation-continue { + margin-block: 2em; +} + +.button-container { + display: flex; + flex-flow: row wrap; + justify-content: end; +} + +@media only screen and (max-width: 480px) { + .button-container button { + width: 100%; + margin: 0.66em 0 0; + } +} + +ul > li { + line-height: 1.5em; +} diff --git a/toolkit/themes/shared/aboutLicense.css b/toolkit/themes/shared/aboutLicense.css new file mode 100644 index 0000000000..9fc7055393 --- /dev/null +++ b/toolkit/themes/shared/aboutLicense.css @@ -0,0 +1,15 @@ +/* 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/. */ + +/* License Illustration */ + +.license-header { + background-image: url("chrome://global/skin/illustrations/about-license.svg"); + background-repeat: no-repeat; + background-position: right center; + min-height: 300px; + display: flex; + align-items: center; + padding-inline-end: 320px; +} diff --git a/toolkit/themes/shared/aboutMemory.css b/toolkit/themes/shared/aboutMemory.css new file mode 100644 index 0000000000..88fa27d501 --- /dev/null +++ b/toolkit/themes/shared/aboutMemory.css @@ -0,0 +1,5 @@ +/* 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/content/aboutMemory.css"); diff --git a/toolkit/themes/shared/aboutNetworking.css b/toolkit/themes/shared/aboutNetworking.css new file mode 100644 index 0000000000..660bdad822 --- /dev/null +++ b/toolkit/themes/shared/aboutNetworking.css @@ -0,0 +1,78 @@ +/* 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"); + +html { + height: 100%; +} + +body { + display: flex; + align-items: stretch; + height: 100%; +} + +#sectionTitle { + float: inline-start; +} + +#refreshDiv { + justify-content: flex-end; + margin-bottom: 0.5em; +} + +#refreshButton { + margin-top: 0; +} + +/** Categories **/ + +.category { + cursor: pointer; + /* Center category names */ + display: flex; + align-items: center; +} + +.category .category-name { + pointer-events: none; +} + +@media (max-width: 830px){ + #categories > .category { + padding-inline-start: 5px; + margin-inline-start: 0; + } +} + +/** Content area **/ + +.main-content { + flex: 1; +} + +.tab { + padding: 0.5em 0; +} + +.tab table { + width: 100%; +} + +th, td, table { + border-collapse: collapse; + border: none; + text-align: start; +} + +th { + padding-bottom: 0.5em; + font-size: larger; +} + +td { + padding-bottom: 0.25em; + border-bottom: 1px solid var(--in-content-box-border-color); +} diff --git a/toolkit/themes/shared/aboutProfiles.css b/toolkit/themes/shared/aboutProfiles.css new file mode 100644 index 0000000000..60e6599a86 --- /dev/null +++ b/toolkit/themes/shared/aboutProfiles.css @@ -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/. */ + + @import url("chrome://global/skin/in-content/info-pages.css"); + +.page-subtitle { + margin-bottom: 3em; +} + +button { + margin-inline-start: 0; + margin-inline-end: 8px; + padding: 3px; +} + +.opendir { + margin-inline-start: 3px; +} + +#action-box { + float: inline-end; + margin-top: 2em; + margin-bottom: 20px; + margin-inline-start: 20px; + margin-inline-end: 0; + width: 30%; +} diff --git a/toolkit/themes/shared/aboutReader.css b/toolkit/themes/shared/aboutReader.css new file mode 100644 index 0000000000..12903a870f --- /dev/null +++ b/toolkit/themes/shared/aboutReader.css @@ -0,0 +1,810 @@ +/* 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/. */ + +/* Avoid adding ID selector rules in this style sheet, since they could + * inadvertently match elements in the article content. */ +:root { + --body-padding: 64px; + --popup-border: rgba(0, 0, 0, 0.12); + --opaque-popup-border: #e0e0e0; + --popup-shadow: rgba(49, 49, 49, 0.3); + --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-a80: rgba(12, 12, 13, 0.8); + --grey-30: #d7d7db; + --blue-40: #45a1ff; + --blue-40-a30: rgba(69, 161, 255, 0.3); + --blue-60: #0060df; + --active-color: #0B83FF; + --font-size: 12; + --content-width: 22em; + --line-height: 1.6em; + --tooltip-background: var(--grey-90-a80); + --tooltip-foreground: white; + --toolbar-button-hover: var(--grey-90-a10); + --toolbar-button-active: var(--grey-90-a20); +} + +body { + --main-background: #fff; + --main-foreground: #333; + --toolbar-border: var(--grey-90-a20); + --toolbar-box-shadow: var(--grey-90-a10); + --popup-button-hover: hsla(0,0%,70%,.4); + --popup-button-active: hsla(240,5%,5%,.15); + --popup-bgcolor: white; + --popup-button: #edecf0; + --selected-background: var(--blue-40-a30); + --selected-border: var(--blue-40); + --popup-line: var(--grey-30); + --font-value-border: var(--grey-30); + --font-color: #000000; + --icon-fill: #3b3b3c; + --icon-disabled-fill: #8080807F; + --link-foreground: var(--blue-60); + --link-selected-foreground: #333; + --visited-link-foreground: #b5007f; + /* light colours */ +} + +body.sepia { + --main-background: #f4ecd8; + --main-foreground: #5b4636; + --toolbar-border: #5b4636; +} + +body.dark { + --main-background: #333; + --main-foreground: #eee; + --toolbar-border: #4a4a4b; + --toolbar-box-shadow: black; + --toolbar-button-hover: var(--grey-90-a30); + --toolbar-button-active: var(--grey-90-a80); + --popup-button-active: hsla(0,0%,70%,.6); + --popup-bgcolor: #4c4a50; + --popup-button: #5c5c61; + --popup-line: #5c5c61; + --selected-background: #3E6D9A; + --link-foreground: #45a1ff; + --visited-link-foreground: rgba(255, 26, 217, 0.3); + --link-selected-foreground: #fff; + --opaque-popup-border: #434146; + --font-value-border: #656468; + --font-color: #fff; + --icon-fill: #fff; + --icon-disabled-fill: #ffffff66; + --tooltip-background: black; + --tooltip-foreground: white; + /* dark colours */ +} + +body { + margin: 0; + padding: var(--body-padding); + background-color: var(--main-background); + color: var(--main-foreground); +} + +body.loaded { + transition: color 0.4s, background-color 0.4s; +} + +body.dark *::-moz-selection { + background-color: var(--selected-background); +} + +a::-moz-selection { + color: var(--link-selected-foreground); +} + +body.sans-serif, +body.sans-serif .remove-button { + font-family: Helvetica, Arial, sans-serif; +} + +body.serif, +body.serif .remove-button { + font-family: Georgia, "Times New Roman", serif; +} + +.container { + margin: 0 auto; + font-size: var(--font-size); + max-width: var(--content-width); + line-height: var(--line-height); +} + +/* Override some controls and content styles based on color scheme */ + +body.light > .container > .header > .domain { + border-bottom-color: #333333 !important; +} + +body.sepia > .container > .header > .domain { + border-bottom-color: #5b4636 !important; +} + +body.dark > .container > .header > .domain { + border-bottom-color: #eeeeee !important; +} + +body.sepia > .container > .footer { + background-color: #dedad4 !important; +} + +body.light blockquote { + border-inline-start: 2px solid #333333 !important; +} + +body.sepia blockquote { + border-inline-start: 2px solid #5b4636 !important; +} + +body.dark blockquote { + border-inline-start: 2px solid #eeeeee !important; +} + +.light-button { + color: #333333; + background-color: #ffffff; +} + +.dark-button { + color: #eeeeee; + background-color: #333333; +} + +.sepia-button { + color: #5b4636; + background-color: #f4ecd8; +} + +/* Loading/error message */ + +.reader-message { + margin-top: 40px; + display: none; + text-align: center; + width: 100%; + font-size: 0.9em; +} + +/* Detector element to see if we're at the top of the doc or not. */ +.top-anchor { + position: absolute; + top: 0; + width: 0; + height: 5px; + pointer-events: none; +} + +/* Header */ + +.header { + text-align: start; + display: none; +} + +.domain { + font-size: 0.9em; + line-height: 1.48em; + padding-bottom: 4px; + font-family: Helvetica, Arial, sans-serif; + text-decoration: none; + border-bottom: 1px solid; + color: var(--link-foreground); +} + +.header > h1 { + font-size: 1.6em; + line-height: 1.25em; + width: 100%; + margin: 30px 0; + padding: 0; +} + +.header > .credits { + font-size: 0.9em; + line-height: 1.48em; + margin: 0 0 10px; + padding: 0; + font-style: italic; +} + +.header > .meta-data { + font-size: 0.65em; + margin: 0 0 15px; +} + +.reader-estimated-time { + text-align: match-parent; +} + +/*======= Controls toolbar =======*/ + +.toolbar-container { + position: sticky; + z-index: 2; + top: 32px; + height: 0; /* take up no space, so body is at the top. */ + + /* As a stick container, we're positioned relative to the body. Move us to + * the edge of the viewport using margins, and take the width of + * the body padding into account for calculating our width. + */ + margin-inline-start: calc(-1 * var(--body-padding)); + width: max(var(--body-padding), calc((100% - var(--content-width)) / 2 + var(--body-padding))); + font-size: var(--font-size); /* Needed to ensure `em` units match, is reset for .reader-controls */ +} + +.toolbar { + padding-block: 16px; + border: 1px solid var(--toolbar-border); + border-radius: 6px; + box-shadow: 0 2px 8px var(--toolbar-box-shadow); + + width: 32px; /* basic width, without padding/border */ + + /* padding should be 16px, except if there's not enough space for that, in + * which case use half the available space for padding (=25% on each side). + * The 34px here is the width + borders. We use a variable because we need + * to know this size for the margin calculation. + */ + --inline-padding: min(16px, calc(25% - 0.25 * 34px)); + padding-inline: var(--inline-padding); + + /* Keep a maximum of 96px distance to the body, but center once the margin + * gets too small. We need to set the start margin, however... + * To center, we'd want 50% of the container, but we'd subtract half our + * own width (16px) and half the border (1px) and the inline padding. + * When the other margin would be 96px, we want 100% - 96px - the complete + * width of the actual toolbar (34px + 2 * padding) + */ + margin-inline-start: max(calc(50% - 17px - var(--inline-padding)), calc(100% - 96px - 34px - 2 * var(--inline-padding))); + + font-family: Helvetica, Arial, sans-serif; + list-style: none; + user-select: none; +} + +@media (prefers-reduced-motion: no-preference) { + .toolbar { + transition-property: border-color, box-shadow; + transition-duration: 250ms; + } + + .toolbar .button { + transition-property: opacity; + transition-duration: 250ms; + } + + .toolbar-container.scrolled .toolbar:not(:hover, :focus-within) { + border-color: transparent; + box-shadow: 0 2px 8px transparent; + } + + .toolbar-container.scrolled .toolbar:not(:hover, :focus-within) .button { + opacity: 0.6; + } + + .toolbar-container.transition-location { + transition-duration: 250ms; + transition-property: width; + } +} + +.toolbar-container.overlaps .button { + opacity: 0.1; +} + +.dropdown-open .toolbar { + border-color: transparent; + box-shadow: 0 2px 8px transparent; +} + +.reader-controls { + /* We use `em`s above this node to get it to the right size. However, + * the UI inside the toolbar should use a fixed, smaller size. */ + font-size: 11px; +} + +.button { + position: relative; + width: 32px; + height: 32px; + padding: 0; + border: none; + border-radius: 4px; + margin: 4px 0; + background-color: transparent; + background-size: 16px 16px; + background-position: center; + background-repeat: no-repeat; + color: var(--font-color); +} + +.button:hover, +.button:-moz-focusring { + background-color: var(--toolbar-button-hover); +} + +.open .button, +.button:active { + background-color: var(--toolbar-button-active); + color: var(--active-color); + fill: var(--active-color); +} + +.hover-label { + position: absolute; + top: 4px; + inset-inline-start: 36px; + line-height: 16px; + white-space: pre; /* make sure we don't wrap */ + background-color: var(--tooltip-background); + color: var(--tooltip-foreground); + padding: 4px 8px; + border-radius: 2px; + visibility: hidden; + pointer-events: none; +} + +/* Show the hover tooltip on non-dropdown buttons. */ +.button:not(.dropdown-toggle):hover > .hover-label, +.button:not(.dropdown-toggle):-moz-focusring > .hover-label, +/* Show the hover tooltip for dropdown buttons unless dropdowns are open. */ +:not(.dropdown-open) > .dropdown > li > .button:hover > .hover-label, +:not(.dropdown-open) > .dropdown > li > .button:-moz-focusring > .hover-label { + visibility: visible; +} + +button { + -moz-context-properties: fill; + color: var(--font-color); + fill: var(--icon-fill); +} + +button:disabled { + fill: var(--icon-disabled-fill); +} + +.toolbar button::-moz-focus-inner { + border: 0; +} + +.dropdown { + text-align: center; + list-style: none; + margin: 0; + padding: 0; + position: relative; +} + +.dropdown li { + margin: 0; + padding: 0; +} + +/*======= Popup =======*/ + +.dropdown .dropdown-popup { + text-align: start; + position: absolute; + inset-inline-start: 40px; + z-index: 1000; + background-color: var(--popup-bgcolor); + visibility: hidden; + border-radius: 4px; + border: 1px solid var(--popup-border); + box-shadow: 0 4px 6px 0 var(--popup-shadow); + border-bottom-width: 0; + top: 0; +} + +.open > .dropdown-popup { + visibility: visible; +} + +.dropdown-arrow { + position: absolute; + height: 24px; + width: 16px; + inset-inline-start: -16px; + background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); + display: block; + -moz-context-properties: fill, stroke; + fill: var(--popup-bgcolor); + stroke: var(--opaque-popup-border); + pointer-events: none; +} + +.dropdown-arrow:dir(rtl) { + transform: scaleX(-1); +} + +/* Align the style dropdown arrow (narrate does its own) */ +.style-dropdown .dropdown-arrow { + top: 7px; +} + +/*======= Font style popup =======*/ + +.radio-button { + /* We visually hide these, but we keep them around so they can be focused + * and changed by interacting with them via the label, or the keyboard, or + * assistive technology. + */ + opacity: 0; + pointer-events: none; + position: absolute; +} + +.radiorow, +.buttonrow { + display: flex; +} + +.content-width-value, +.font-size-value, +.line-height-value { + box-sizing: border-box; + width: 36px; + height: 15px; + line-height: 15px; + display: flex; + justify-content: center; + align-content: center; + margin: auto; + border-radius: 10px; + border: 1px solid var(--font-value-border); + background-color: var(--popup-button); +} + +.buttonrow > button { + border: 0; + height: 60px; + width: 90px; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; +} + +.buttonrow > button:enabled:hover, +.buttonrow > button:enabled:-moz-focusring { + background-color: var(--popup-button-hover); +} + +.buttonrow > button:enabled:active { + background-color: var(--popup-button-active); +} + +.radiorow:not(:last-child), +.buttonrow:not(:last-child) { + border-bottom: 1px solid var(--popup-line); +} + +.radiorow > label { + position: relative; + box-sizing: border-box; + border-radius: 2px; + border: 2px solid var(--popup-border); +} + +.radiorow > label[checked] { + border-color: var(--selected-border); +} + +/* For the hover style, we draw a line under the item by means of a + * pseudo-element. Because these items are variable height, and + * because their contents are variable height, position it absolutely, + * and give it a width of 100% (the content width) + 4px for the 2 * 2px + * border width. + */ +.radiorow > input[type=radio]:-moz-focusring + label::after, +.radiorow > label:hover::after { + content: ""; + display: block; + border-bottom: 2px solid var(--blue-40); + width: calc(100% + 4px); + position: absolute; + /* to skip the 2 * 2px border + 2px spacing. */ + bottom: -6px; + /* Match the start of the 2px border of the element: */ + inset-inline-start: -2px; +} + +.color-scheme-buttons > label { + height: 34px; + width: 70px; + font-size: 12px; + /* Center the labels horizontally as well as vertically */ + display: inline-flex; + align-items: center; + justify-content: center; + /* We want 10px between items, but there's no margin collapsing in flexbox. */ + margin: 10px 5px; +} + +.color-scheme-buttons > input:first-child + label { + margin-inline-start: 10px; +} + +.color-scheme-buttons > label:last-child { + margin-inline-end: 10px; +} + +.font-type-buttons > label { + height: 64px; + width: 105px; + /* Slightly more space between these items. */ + margin: 10px; + /* Center the Sans-serif / Serif labels */ + text-align: center; + background-size: 63px 39px; + background-repeat: no-repeat; + background-position: center 18px; + background-color: var(--popup-button); + fill: currentColor; + -moz-context-properties: fill; + /* This mostly matches baselines, but because of differences in font + * baselines between serif and sans-serif, this isn't always enough. */ + line-height: 1; + padding-top: 2px; +} + +.font-type-buttons > label[checked] { + background-color: var(--selected-background); +} + +.sans-serif-button { + font-family: Helvetica, Arial, sans-serif; + background-image: url("chrome://global/skin/reader/RM-Sans-Serif.svg"); +} + +/* Tweak padding to match the baseline on mac */ +:root[platform=macosx] .sans-serif-button { + padding-top: 3px; +} + +.serif-button { + font-family: Georgia, "Times New Roman", serif; + background-image: url("chrome://global/skin/reader/RM-Serif.svg"); +} + +/*======= Toolbar icons =======*/ + +.close-button { + -moz-context-properties: fill; + background-image: url("chrome://global/skin/reader/close-16.svg"); +} + +.style-button { + background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); +} + +.minus-button { + background-size: 18px 18px; + background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); +} + +.plus-button { + background-size: 18px 18px; + background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); +} + +.content-width-minus-button { + background-size: 42px 16px; + background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg"); +} + +.content-width-plus-button { + background-size: 44px 16px; + background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg"); +} + +.line-height-minus-button { + background-size: 34px 14px; + background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg"); +} + +.line-height-plus-button { + background-size: 34px 24px; + background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg"); +} + +/* Mirror the line height buttons if the article is RTL. */ +.reader-controls[articledir="rtl"] .line-height-minus-button, +.reader-controls[articledir="rtl"] .line-height-plus-button { + transform: scaleX(-1); +} + +@media print { + .toolbar { + display: none !important; + } +} + +/*======= Article content =======*/ + +/* Note that any class names from the original article that we want to match on + * must be added to CLASSES_TO_PRESERVE in ReaderMode.jsm, so that + * Readability.js doesn't strip them out */ + +.moz-reader-content { + display: none; + font-size: 1em; +} + +@media print { + .moz-reader-content p, + .moz-reader-content code, + .moz-reader-content pre, + .moz-reader-content blockquote, + .moz-reader-content ul, + .moz-reader-content ol, + .moz-reader-content li, + .moz-reader-content figure, + .moz-reader-content .wp-caption { + margin: 0 0 10px !important; + padding: 0 !important; + } +} + +.moz-reader-content h1, +.moz-reader-content h2, +.moz-reader-content h3 { + font-weight: bold; +} + +.moz-reader-content h1 { + font-size: 1.6em; + line-height: 1.25em; +} + +.moz-reader-content h2 { + font-size: 1.2em; + line-height: 1.51em; +} + +.moz-reader-content h3 { + font-size: 1em; + line-height: 1.66em; +} + +.moz-reader-content a:link { + text-decoration: underline; + font-weight: normal; +} + +.moz-reader-content a:link, +.moz-reader-content a:link:hover, +.moz-reader-content a:link:active { + color: var(--link-foreground); +} + +.moz-reader-content a:visited { + color: var(--visited-link-foreground); +} + +.moz-reader-content * { + max-width: 100%; + height: auto; +} + +.moz-reader-content p, +.moz-reader-content p, +.moz-reader-content code, +.moz-reader-content pre, +.moz-reader-content blockquote, +.moz-reader-content ul, +.moz-reader-content ol, +.moz-reader-content li, +.moz-reader-content figure, +.moz-reader-content .wp-caption { + margin: -10px -10px 20px; + padding: 10px; + border-radius: 5px; +} + +.moz-reader-content li { + margin-bottom: 0; +} + +.moz-reader-content li > ul, +.moz-reader-content li > ol { + margin-bottom: -10px; +} + +.moz-reader-content p > img:only-child, +.moz-reader-content p > a:only-child > img:only-child, +.moz-reader-content .wp-caption img, +.moz-reader-content figure img { + display: block; +} + +.moz-reader-content img[moz-reader-center] { + margin-inline: auto; +} + +.moz-reader-content .caption, +.moz-reader-content .wp-caption-text +.moz-reader-content figcaption { + font-size: 0.9em; + line-height: 1.48em; + font-style: italic; +} + +.moz-reader-content code, +.moz-reader-content pre { + white-space: pre-wrap; +} + +.moz-reader-content blockquote { + padding: 0; + padding-inline-start: 16px; +} + +.moz-reader-content ul, +.moz-reader-content ol { + padding: 0; +} + +.moz-reader-content ul { + padding-inline-start: 30px; + list-style: disc; +} + +.moz-reader-content ol { + padding-inline-start: 30px; + list-style: decimal; +} + +table, +th, +td { + border: 1px solid currentColor; + border-collapse: collapse; + padding: 6px; + vertical-align: top; +} + +table { + margin: 5px; +} + +/* Visually hide (but don't display: none) screen reader elements */ +.moz-reader-content .visually-hidden, +.moz-reader-content .visuallyhidden, +.moz-reader-content .sr-only { + display: inline-block; + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + border-width: 0; +} + +/* Hide elements with common "hidden" class names */ +.moz-reader-content .hidden, +.moz-reader-content .invisible { + display: none; +} + +/* Enforce wordpress and similar emoji/smileys aren't sized to be full-width, + * see bug 1399616 for context. */ +.moz-reader-content img.wp-smiley, +.moz-reader-content img.emoji { + display: inline-block; + border-width: 0; + /* height: auto is implied from `.moz-reader-content *` rule. */ + width: 1em; + margin: 0 .07em; + padding: 0; +} + +.reader-show-element { + display: initial; +} diff --git a/toolkit/themes/shared/aboutRights.css b/toolkit/themes/shared/aboutRights.css new file mode 100644 index 0000000000..c988defaf7 --- /dev/null +++ b/toolkit/themes/shared/aboutRights.css @@ -0,0 +1,19 @@ +/* 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/. */ + +/* Rights Illustration */ + +.rights-header { + background-image: url("chrome://global/skin/illustrations/about-rights.svg"); + background-repeat: no-repeat; + background-position: right center; + min-height: 300px; + display: flex; + align-items: center; + padding-inline-end: 320px; +} + +.rights-header:dir(rtl) { + background-position: left center; +} diff --git a/toolkit/themes/shared/aboutServiceWorkers.css b/toolkit/themes/shared/aboutServiceWorkers.css new file mode 100644 index 0000000000..c04e9161cd --- /dev/null +++ b/toolkit/themes/shared/aboutServiceWorkers.css @@ -0,0 +1,44 @@ +/* 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/. */ + +body { + min-width: 330px; + max-width: 100%; + min-height: 330px; + max-height: 100%; +} + +.warningBackground { + display: none; + background: -moz-Dialog; + width: 100%; + height: 100%; + z-index: 10; + top: 0; + inset-inline-start: 0; + position:fixed; +} + +.warningMessage { + color: FieldText; + position: relative; + min-width: 330px; + max-width: 50em; + margin: 4em auto; + border: 1px solid ThreeDShadow; + border-radius: 10px; + padding: 3em; + padding-inline-start: 30px; + background: Field; + margin-inline-start: auto; + text-align: center; +} + +.active { + display: block; +} + +.inactive { + display: none; +} diff --git a/toolkit/themes/shared/aboutSupport.css b/toolkit/themes/shared/aboutSupport.css new file mode 100644 index 0000000000..862e1b5dc1 --- /dev/null +++ b/toolkit/themes/shared/aboutSupport.css @@ -0,0 +1,132 @@ +/* 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/info-pages.css"); + +.page-subtitle { + margin-bottom: 3em; +} + +.major-section { + margin-top: 2em; + margin-bottom: 1em; + font-size: large; + text-align: start; + font-weight: bold; +} + +button { + margin-inline-start: 0; + margin-inline-end: 8px; + padding: 3px; +} + +th.title-column { + white-space: nowrap; + width: 0px; + font-size: medium; +} + +td.integer { + text-align: end; + font-family: monospace; +} + +.prefs-table { + width: 100%; + table-layout: fixed; +} + +.pref-name { + width: 70%; + white-space: nowrap; + overflow: hidden; +} + +.pref-value { + width: 30%; + white-space: nowrap; + overflow: hidden; +} + +#crashes-table th:first-child { + width: 50%; +} + +#features-table th:first-child, +#remote-processes-table th:first-child { + width: 30%; +} + +#features-table th:nth-child(2) { + width: 20%; +} + +#action-box { + float: inline-end; + margin-top: 2em; + margin-bottom: 20px; + margin-inline-start: 20px; + margin-inline-end: 0; + width: 30%; +} + +#reset-box, +#safe-mode-box { + display: none; +} + +#reset-box > h3 { + margin-top: 0; +} + +#action-box button { + display: block; +} + +#enumerate-database-result, +#verify-place-result { + max-height: 200px; + overflow: auto; + text-align: left; + direction: ltr; +} + +.hidden { + display: none; +} + +.third-party-svg-common { + -moz-context-properties: fill; + fill: currentColor; + width: 16px; +} + +.third-party-button { + min-width: auto; +} + +.third-party-button-open-dir { + margin-inline-start: 10px; +} + +.third-party-image-unsigned { + margin-inline-end: 10px; +} + +.third-party-modules-header-occurrence { + width: 6em; +} + +.third-party-modules-column-version { + width: 15em; +} + +.third-party-modules-column-occurrence { + border-inline-end-width: 0; +} + +.third-party-modules-column-expand { + border-inline-start-width: 0; +} diff --git a/toolkit/themes/shared/alert.inc.css b/toolkit/themes/shared/alert.inc.css new file mode 100644 index 0000000000..c04180da00 --- /dev/null +++ b/toolkit/themes/shared/alert.inc.css @@ -0,0 +1,173 @@ +/* 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.css"); + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +#alertBox[animate] { + animation-timing-function: cubic-bezier(.12,1.23,.48,1.09); +} + +#alertBox[animate][clicked] { + animation-duration: .6s; + animation-name: alert-clicked-animation; +} + +/* This is used if the close button is clicked + before the animation has finished. */ +#alertBox[animate][closing] { + animation-duration: .6s; + animation-name: alert-closing-animation; +} + +#alertBox[animate]:not([clicked], [closing]):hover { + /* !important is necessary because CSS animations have highest + importance in the cascade with exception to !important rules. */ + opacity: 1 !important; +} + +@keyframes alert-animation { + from { + opacity: 0; + } + 5% { + opacity: 1; + } + 95% { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes alert-clicked-animation { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes alert-closing-animation { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +#alertIcon { + margin-top: 6px; + margin-inline-start: 8px; + margin-inline-end: 0; + margin-bottom: 0; + width: 16px; + min-height: 16px; + max-height: 16px; +} + +@media (resolution: 2dppx) { + #alertIcon { + image-rendering: -moz-crisp-edges; + } +} + +#alertImage { + width: 80px; + height: 80px; + max-width: 80px; + max-height: 80px; + object-fit: scale-down; + margin: 0 7px 7px; +} + +.alertTextBox { + padding-top: 4px; + /* The text box width is increased to make up for the lack of image when one + is not provided. 349px is the text box width when a picture is present, + 255px, plus the width of the image, 80px, and the margins, 7px each. */ + width: 349px; +} + +#alertBox[hasImage] > box > #alertTextBox { + width: 255px; +} + +#alertBox:not([hasImage]) > box > #alertTextBox { + padding-inline-start: 8px; +} + +#alertTextLabel { + padding-inline-end: 8px; +} + +.alertTitle { + -moz-box-flex: 1; + font-weight: bold; + padding: 6px 8px 0; + width: 255px; +} + +#alertFooter { + -moz-box-align: start; +} + +#alertBox:not([hasOrigin]) > box > #alertTextBox, +#alertFooter { + padding-bottom: 5px; +} + +#alertSourceLabel { + -moz-box-flex: 1; + font-size: 83.334%; + color: GrayText; +} + +#alertSettings { + appearance: none; + background-color: transparent; + border-width: 0; + border-radius: 20px; + min-width: 0; + list-style-image: url("chrome://global/skin/icons/settings.svg"); + -moz-context-properties: fill; + fill: currentColor; + margin-inline-end: 4px; + margin-bottom: 0; +} + +#alertSettings > .button-box { + padding: 0; +} + +#alertSettings .button-icon { + margin: 0; +} + +#alertSettings:hover, +#alertSettings[open] { + fill: #ddd; +} + +#alertSettings:hover { + background-color: rgb(128,128,128); +} + +#alertSettings[open], +#alertSettings:hover:active { + background-color: rgb(102,102,102); +} + +#alertSettings[focusedViaMouse]:-moz-focusring { + outline: none; +} + +#alertSettings > .button-box > .button-menu-dropmarker, +#alertSettings > .button-box > .box-inherit > .button-text { + display: none; +} diff --git a/toolkit/themes/shared/appPicker.css b/toolkit/themes/shared/appPicker.css new file mode 100644 index 0000000000..fa34f5e020 --- /dev/null +++ b/toolkit/themes/shared/appPicker.css @@ -0,0 +1,33 @@ +/* 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/. */ + + +#app-picker { + width: 320px; +} + +#content-description { + font-weight: bold; +} + +#app-picker-listbox { + height: 212px; +} + +#app-picker-listbox > richlistitem { + -moz-box-align: center; +} + +#content-icon, +#app-picker-listbox > richlistitem > image { + margin: 5px; + width: 32px; + height: 32px; +} + +#app-picker-listbox > richlistitem > label { + margin: 0px; + padding: 5px; + white-space: nowrap; +} diff --git a/toolkit/themes/shared/arrowscrollbox.css b/toolkit/themes/shared/arrowscrollbox.css new file mode 100644 index 0000000000..ebd6204967 --- /dev/null +++ b/toolkit/themes/shared/arrowscrollbox.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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +:host([scrolledtostart=true])::part(overflow-start-indicator), +:host([scrolledtoend=true])::part(overflow-end-indicator), +:host(:not([overflowing=true])) > toolbarbutton { + visibility: collapse; +} + +/* Scroll arrows */ + +toolbarbutton { + color: inherit !important; /* override any color changes for toolbar buttons in e.g. disabled or hover states */ + list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 1; + padding: 2px; +} + +toolbarbutton[disabled="true"] { + fill-opacity: 0.4; +} + +:host([orient="horizontal"]) > toolbarbutton { + list-style-image: url("chrome://global/skin/icons/arrow-left.svg"); +} + +#scrollbutton-up > .toolbarbutton-icon { + transform: scaleY(-1); +} + +:host([orient="horizontal"]) > #scrollbutton-down:-moz-locale-dir(ltr) > .toolbarbutton-icon, +:host([orient="horizontal"]) > #scrollbutton-up:-moz-locale-dir(rtl) > .toolbarbutton-icon { + transform: scaleX(-1); +} + +toolbarbutton > .toolbarbutton-text { + display: none; +} + +%ifndef XP_MACOSX +:host(:not([clicktoscroll="true"])) > toolbarbutton { + appearance: none; +} +%endif diff --git a/toolkit/themes/shared/close-icon.css b/toolkit/themes/shared/close-icon.css new file mode 100644 index 0000000000..3fe25d9af0 --- /dev/null +++ b/toolkit/themes/shared/close-icon.css @@ -0,0 +1,32 @@ +/* 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/. */ + +.close-icon { + appearance: none; + -moz-context-properties: fill, fill-opacity; + list-style-image: url(chrome://global/skin/icons/close.svg); + color: inherit !important; + fill: currentColor; + fill-opacity: 0; +} + +.close-icon:hover { + fill-opacity: 0.1; +} + +.close-icon:hover:active { + fill-opacity: 0.2; +} + +.close-icon > .button-icon, +.close-icon > .button-box > .button-icon, +.close-icon > .toolbarbutton-icon { + width: 20px; + height: 20px; +} + +.close-icon > .button-box > .button-text, +.close-icon > .toolbarbutton-text { + display: none; +} diff --git a/toolkit/themes/shared/config.css b/toolkit/themes/shared/config.css new file mode 100644 index 0000000000..7e6b761217 --- /dev/null +++ b/toolkit/themes/shared/config.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/. */ + +#warningScreen { + font-size: 15px; + padding-top: 0; + padding-bottom: 0; + padding-inline-start: calc(48px + 4.6em); + padding-inline-end: 48px; +} + +.title { + background-image: url("chrome://global/skin/icons/warning.svg"); + fill: #fcd100; +} + +#warningTitle { + font-weight: lighter; + line-height: 1.2; + margin: 0; + margin-bottom: .5em; +} + +#warningText { + margin: 1em 0; +} + +#warningButton { + margin-top: 0.6em; +} + +#filterRow { + margin-top: 4px; + margin-inline-start: 4px; +} + +#configTree { + margin-top: 4px; + margin-bottom: 4px; +} + +#configTreeBody::-moz-tree-cell-text(user) { + font-weight: bold; +} + +#configTreeBody::-moz-tree-cell-text(locked) { + font-style: italic; +} diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css new file mode 100644 index 0000000000..d03d4759ee --- /dev/null +++ b/toolkit/themes/shared/datetimeinputpickers.css @@ -0,0 +1,376 @@ +/* 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 { + --font-size-default: 1.1rem; + --spinner-width: 3rem; + --spinner-margin-top-bottom: 0.4rem; + --spinner-item-height: 2.4rem; + --spinner-item-margin-bottom: 0.1rem; + --spinner-button-height: 1.2rem; + --colon-width: 2rem; + --day-period-spacing-width: 1rem; + --calendar-width: 23.1rem; + --date-picker-item-height: 2.5rem; + --date-picker-item-width: 3.3rem; + + --border: 0.1rem solid ThreeDShadow; + --border-radius: 0.3rem; + --border-active-color: ButtonShadow; + + --font-color: ButtonText; + --fill-color: ThreeDFace; + + --today-fill-color: ThreeDShadow; + + --selected-font-color: HighlightText; + --selected-fill-color: Highlight; + + --button-fill-color-active: ButtonFace; + + /* Use -moz-activehyperlinktext to get a system color that + by default will be closest to Red */ + --weekend-font-color: -moz-activehyperlinktext; + + --disabled-fill-color: ButtonShadow; + + --disabled-opacity: 0.2; + + /* We need to hide the scroll bar but maintain its scrolling + capability, so using |overflow: hidden| is not an option. */ + scrollbar-width: none; +} + +html { + font-size: 10px; +} + +body { + margin: 0; + color: var(--font-color); + font: message-box; + font-size: var(--font-size-default); +} + +button { + appearance: none; + background: none; + border: none; +} + +.nav { + display: flex; + width: var(--calendar-width); + height: 2.4rem; + margin-bottom: 0.8rem; + justify-content: space-between; +} + +.nav > button { + width: 3rem; + height: var(--date-picker-item-height); + -moz-context-properties: fill, fill-opacity; + fill: var(--font-color); + fill-opacity: .5; +} + +.nav > button:hover { + fill-opacity: .8; +} + +.nav > button.active { + fill-opacity: 1; +} + +.nav > button.prev, +.nav > button.next { + background: url("chrome://global/skin/icons/arrow-left.svg") no-repeat center; +} + +.nav > button.prev:dir(rtl), +.nav > button.next:dir(ltr) { + transform: scaleX(-1); +} + +.month-year-container { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + top: 0; + inset-inline: 3rem; + width: 17.1rem; + height: var(--date-picker-item-height); + z-index: 10; +} + +button.month-year { + font-size: 1.3rem; + border: var(--border); + border-radius: 0.3rem; + padding-block: 0.2rem; + padding-inline: 1.2rem 2.6rem; +} + +button.month-year:hover { + background: var(--fill-color); +} + +button.month-year.active { + border-color: var(--border-active-color); + background: var(--button-fill-color-active); +} + +button.month-year::after { + position: absolute; + content: ""; + width: 2.6rem; + height: 1.6rem; + background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%; + -moz-context-properties: fill, fill-opacity; + fill: var(--font-color); + fill-opacity: .5; +} + +button.month-year.active::after { + background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%; +} + +.month-year-view { + position: absolute; + z-index: 5; + padding-top: 3.2rem; + top: 0; + left: 0; + bottom: 0; + width: var(--calendar-width); + background: window; + opacity: 1; + transition: opacity 0.15s; +} + +.month-year-view.hidden { + visibility: hidden; + opacity: 0; +} + +.month-year-view > .spinner-container { + width: 5.5rem; + margin: 0 0.5rem; +} + +.month-year-view .spinner { + transform: scaleY(1); + transform-origin: top; + transition: transform 0.15s; +} + +.month-year-view.hidden .spinner { + transform: scaleY(0); + transition: none; +} + +.month-year-view .spinner > div { + transform: scaleY(1); + transition: transform 0.15s; +} + +.month-year-view.hidden .spinner > div { + transform: scaleY(2.5); + transition: none; +} + +.order-month-year > #spinner-month, +.order-year-month > #spinner-year { + order: 1; +} + +.order-month-year > #spinner-year, +.order-year-month > #spinner-month { + order: 2; +} + +.calendar-container { + cursor: default; + display: flex; + flex-direction: column; + width: var(--calendar-width); +} + +.week-header { + display: flex; +} + +.week-header > div { + opacity: .5; +} + +.days-viewport { + height: 15rem; + overflow: hidden; + position: relative; +} + +.days-view { + position: absolute; + display: flex; + flex-wrap: wrap; + flex-direction: row; +} + +.week-header > div, +.days-view > div { + align-items: center; + display: flex; + height: var(--date-picker-item-height); + position: relative; + justify-content: center; + width: var(--date-picker-item-width); +} + +.days-view > .outside { + opacity: .5; +} + +.weekend { + color: var(--weekend-font-color); +} + +.days-view > .weekend.outside { + opacity: .5; +} + +.days-view > .out-of-range, +.days-view > .off-step { + background: var(--disabled-fill-color); +} + +.days-view > .today { + font-weight: bold; +} + +.days-view > .out-of-range::before, +.days-view > .off-step::before { + display: none; +} + +.days-view > div:hover::before, +.days-view > .select::before, +.days-view > .today::before { + inset: 5%; +} + +#time-picker, +.month-year-view { + display: flex; + flex-direction: row; + justify-content: center; +} + +.spinner-container { + display: flex; + flex-direction: column; + width: var(--spinner-width); +} + +.spinner-container > button { + height: var(--spinner-button-height); + -moz-context-properties: fill, fill-opacity; + fill: var(--font-color); + fill-opacity: .5; +} + +.spinner-container > button:hover { + fill-opacity: .8; +} + +.spinner-container > button.active { + fill-opacity: 1; +} + +.spinner-container > button.up { + background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%; +} + +.spinner-container > button.down { + background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%; +} + +.spinner-container.hide-buttons > button { + visibility: hidden; +} + +.spinner-container > .spinner { + position: relative; + width: 100%; + margin: var(--spinner-margin-top-bottom) 0; + cursor: default; + overflow-y: scroll; + scroll-snap-type: both mandatory; +} + +.spinner-container > .spinner > div { + box-sizing: border-box; + position: relative; + text-align: center; + padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0; + margin-bottom: var(--spinner-item-margin-bottom); + height: var(--spinner-item-height); + user-select: none; + scroll-snap-align: start; +} + +.spinner-container > .spinner > div::before, +.calendar-container .days-view > div::before { + position: absolute; + inset: 5%; + z-index: -10; + border-radius: var(--border-radius); +} + +.spinner-container > .spinner > div:hover::before, +.calendar-container .days-view > div:hover::before { + background: var(--fill-color); + border: var(--border); + content: ""; +} + +.calendar-container .days-view > div.today::before { + background: var(--today-fill-color); + content: ""; +} + +.spinner-container > .spinner:not(.scrolling) > div.selection, +.calendar-container .days-view > div.selection { + color: var(--selected-font-color); +} + +.spinner-container > .spinner > div.selection::before, +.calendar-container .days-view > div.selection::before { + background: var(--selected-fill-color); + border: none; + content: ""; +} + +.spinner-container > .spinner > div.disabled::before, +.spinner-container > .spinner.scrolling > div.selection::before, +.spinner-container > .spinner.scrolling > div:hover::before { + display: none; +} + +.spinner-container > .spinner > div.disabled { + opacity: var(--disabled-opacity); +} + +.colon { + display: flex; + justify-content: center; + align-items: center; + width: var(--colon-width); + margin-bottom: 0.3rem; +} + +.spacer { + width: var(--day-period-spacing-width); +} diff --git a/toolkit/themes/shared/extensions/category-available.svg b/toolkit/themes/shared/extensions/category-available.svg new file mode 100644 index 0000000000..f06b719317 --- /dev/null +++ b/toolkit/themes/shared/extensions/category-available.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" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" width="32" height="32"> + <path d="M12 16a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm2.2-3.54l-1.92 1.92a.38.38 0 0 1-.54 0L9.8 12.46a.38.38 0 1 1 .54-.54l1.27 1.27V9.88a.38.38 0 0 1 .77 0v3.3l1.27-1.27a.38.38 0 0 1 .54.54z" /> + <path d="M6 12a2.56 2.56 0 0 1 1 .21V12a5 5 0 0 1 5-5V5a1 1 0 0 0-1-1H7.75A.77.77 0 0 1 7 3.25c0-.75 1-.78 1-1.75S7.1 0 6 0 4 .64 4 1.5s1 1 1 1.75a.77.77 0 0 1-.75.75H1a1 1 0 0 0-1 1v2.25A.77.77 0 0 0 .75 8c.75 0 .78-1 1.75-1S4 7.9 4 9s-.64 2-1.5 2-1-1-1.75-1a.77.77 0 0 0-.75.75V15a1 1 0 0 0 1 1h3.25a.77.77 0 0 0 .75-.75c0-.75-1-.78-1-1.75S4.9 12 6 12z" /> +</svg> diff --git a/toolkit/themes/shared/extensions/category-dictionaries.svg b/toolkit/themes/shared/extensions/category-dictionaries.svg new file mode 100644 index 0000000000..850988625c --- /dev/null +++ b/toolkit/themes/shared/extensions/category-dictionaries.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" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" width="32" height="32"> + <path d="M12 8a4 4 0 1 0 4 4 4 4 0 0 0-4-4zm2.2 4.46l-1.92 1.92a.38.38 0 0 1-.54 0L9.8 12.46a.38.38 0 0 1 .54-.54l1.27 1.27V9.88a.38.38 0 0 1 .77 0v3.3l1.27-1.27a.38.38 0 0 1 .54.54z"/> + <path d="M6.93.64a1 1 0 0 0-1.86 0l-5 14a1 1 0 0 0 .61 1.28A1 1 0 0 0 1 16a1 1 0 0 0 .94-.66l1.58-4.43h3.6a5 5 0 0 1 2.34-3.19zM4.24 8.91L6 4l1.76 4.91z"/> +</svg> diff --git a/toolkit/themes/shared/extensions/category-discover.svg b/toolkit/themes/shared/extensions/category-discover.svg new file mode 100644 index 0000000000..8b2c684a0d --- /dev/null +++ b/toolkit/themes/shared/extensions/category-discover.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" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" width="32" height="32"> + <path d="M9.5 3s.43 2.43 1.25 3.25S14 7.5 14 7.5s-2.43.39-3.25 1.21S9.5 12 9.5 12s-.39-2.46-1.21-3.29S5 7.5 5 7.5s2.46-.43 3.29-1.25S9.5 3 9.5 3m0-2a2 2 0 0 0-2 1.68 7.54 7.54 0 0 1-.66 2.15 7.9 7.9 0 0 1-2.21.7 2 2 0 0 0 0 3.95 7.73 7.73 0 0 1 2.18.66 7.74 7.74 0 0 1 .66 2.19 2 2 0 0 0 2 1.68 2 2 0 0 0 2-1.66 7.89 7.89 0 0 1 .7-2.21 7.57 7.57 0 0 1 2.15-.66 2 2 0 0 0 0-3.94 7.69 7.69 0 0 1-2.18-.7 7.73 7.73 0 0 1-.7-2.18A2 2 0 0 0 9.5 1zM5.09 12.51a3.13 3.13 0 0 1-1.18-.42 3.11 3.11 0 0 1-.42-1.18.5.5 0 0 0-.49-.41.5.5 0 0 0-.49.42 3 3 0 0 1-.4 1.17 3.14 3.14 0 0 1-1.19.42.5.5 0 0 0 0 1 3 3 0 0 1 1.19.4 3 3 0 0 1 .4 1.19.5.5 0 0 0 .49.4.5.5 0 0 0 .49-.41 3.2 3.2 0 0 1 .42-1.19 3 3 0 0 1 1.17-.4.5.5 0 0 0 0-1zM4.09 2a2.36 2.36 0 0 1-.82-.28A2.37 2.37 0 0 1 3 .91.5.5 0 0 0 2.5.5a.5.5 0 0 0-.5.42 2.28 2.28 0 0 1-.27.81A2.4 2.4 0 0 1 .91 2a.5.5 0 0 0 0 1 2.32 2.32 0 0 1 .82.26 2.34 2.34 0 0 1 .27.82.5.5 0 0 0 .49.42.5.5 0 0 0 .51-.41 2.42 2.42 0 0 1 .28-.83 2.3 2.3 0 0 1 .8-.26.5.5 0 0 0 0-1z"/> +</svg> diff --git a/toolkit/themes/shared/extensions/category-extensions.svg b/toolkit/themes/shared/extensions/category-extensions.svg new file mode 100644 index 0000000000..105a8981aa --- /dev/null +++ b/toolkit/themes/shared/extensions/category-extensions.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" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" width="32" height="32"> + <path d="M14.53 8c-1 0-1 1-1.75 1a.77.77 0 0 1-.78-.75V5a1 1 0 0 0-1-1H7.78A.77.77 0 0 1 7 3.25c0-.75 1-.78 1-1.75S7.13 0 6 0 4 .64 4 1.5s1 1 1 1.75a.77.77 0 0 1-.72.75H1a1 1 0 0 0-1 1v2.25A.77.77 0 0 0 .78 8c.75 0 .78-1 1.75-1S4 7.9 4 9s-.64 2-1.5 2-1-1-1.75-1a.77.77 0 0 0-.75.75V15a1 1 0 0 0 1 1h3.28a.77.77 0 0 0 .72-.75c0-.75-1-.78-1-1.75S4.92 12 6 12s2 .64 2 1.5-1 1-1 1.75a.77.77 0 0 0 .75.75H11a1 1 0 0 0 1-1v-3.25a.77.77 0 0 1 .75-.75c.75 0 .78 1 1.75 1s1.5-.9 1.5-2-.61-2-1.47-2z"/> +</svg> diff --git a/toolkit/themes/shared/extensions/category-recent.svg b/toolkit/themes/shared/extensions/category-recent.svg new file mode 100644 index 0000000000..08200746ca --- /dev/null +++ b/toolkit/themes/shared/extensions/category-recent.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" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" width="32" height="32"> + <path d="M12 8a4 4 0 1 0 4 4 4 4 0 0 0-4-4zm-2.2 3.54l1.92-1.92a.38.38 0 0 1 .54 0l1.92 1.92a.38.38 0 0 1-.54.54l-1.27-1.27v3.3a.38.38 0 0 1-.77 0v-3.3l-1.27 1.27a.38.38 0 0 1-.54-.54z"/> + <path d="M6 12a2.56 2.56 0 0 1 1 .21V12a5 5 0 0 1 5-5V5a1 1 0 0 0-1-1H7.75A.77.77 0 0 1 7 3.25c0-.75 1-.78 1-1.75S7.1 0 6 0 4 .64 4 1.5s1 1 1 1.75a.77.77 0 0 1-.75.75H1a1 1 0 0 0-1 1v2.25A.77.77 0 0 0 .75 8c.75 0 .78-1 1.75-1S4 7.9 4 9s-.64 2-1.5 2-1-1-1.75-1a.77.77 0 0 0-.75.75V15a1 1 0 0 0 1 1h3.25a.77.77 0 0 0 .75-.75c0-.75-1-.78-1-1.75S4.9 12 6 12z"/> +</svg> diff --git a/toolkit/themes/shared/extensions/category-themes.svg b/toolkit/themes/shared/extensions/category-themes.svg new file mode 100644 index 0000000000..502fdc595f --- /dev/null +++ b/toolkit/themes/shared/extensions/category-themes.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" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" width="32" height="32"> + <path d="M4 11a2 2 0 0 0-1.91 1.44C1.71 13.59 1.37 14.56.31 15a.49.49 0 0 0-.27.43.5.5 0 0 0 .5.5 7 7 0 0 0 4.83-1.5A2 2 0 0 0 4 11zM15.69 1.29a1 1 0 0 0-1.34 0l-8 7a1 1 0 0 0 0 1.43l1 1A1 1 0 0 0 8 11a1 1 0 0 0 .71-.33l7-8a1 1 0 0 0-.02-1.38z"/> +</svg> diff --git a/toolkit/themes/shared/extensions/extension.svg b/toolkit/themes/shared/extensions/extension.svg new file mode 100644 index 0000000000..01706ebdc3 --- /dev/null +++ b/toolkit/themes/shared/extensions/extension.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="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M14.5 8c-.971 0-1 1-1.75 1a.765.765 0 0 1-.75-.75V5a1 1 0 0 0-1-1H7.75A.765.765 0 0 1 7 3.25c0-.75 1-.779 1-1.75C8 .635 7.1 0 6 0S4 .635 4 1.5c0 .971 1 1 1 1.75a.765.765 0 0 1-.75.75H1a1 1 0 0 0-1 1v2.25A.765.765 0 0 0 .75 8c.75 0 .779-1 1.75-1C3.365 7 4 7.9 4 9s-.635 2-1.5 2c-.971 0-1-1-1.75-1a.765.765 0 0 0-.75.75V15a1 1 0 0 0 1 1h3.25a.765.765 0 0 0 .75-.75c0-.75-1-.779-1-1.75 0-.865.9-1.5 2-1.5s2 .635 2 1.5c0 .971-1 1-1 1.75a.765.765 0 0 0 .75.75H11a1 1 0 0 0 1-1v-3.25a.765.765 0 0 1 .75-.75c.75 0 .779 1 1.75 1 .865 0 1.5-.9 1.5-2s-.635-2-1.5-2z"/> +</svg> diff --git a/toolkit/themes/shared/extensions/extensionGeneric.svg b/toolkit/themes/shared/extensions/extensionGeneric.svg new file mode 100644 index 0000000000..28c2f7ba38 --- /dev/null +++ b/toolkit/themes/shared/extensions/extensionGeneric.svg @@ -0,0 +1,12 @@ +<!-- 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="32" height="32" viewBox="0 0 64 64"> + <defs> + <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#66cc52" stop-opacity="1"/> + <stop offset="100%" stop-color="#60bf4c" stop-opacity="1"/> + </linearGradient> + </defs> + <path fill="url('#gradient-linear-puzzle-piece')" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/> +</svg> diff --git a/toolkit/themes/shared/extensions/line.svg b/toolkit/themes/shared/extensions/line.svg new file mode 100644 index 0000000000..2e5cf6e74c --- /dev/null +++ b/toolkit/themes/shared/extensions/line.svg @@ -0,0 +1,99 @@ +<!-- 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="16" height="16"> + <defs> + <radialGradient id="a" cx="14.305" cy="3.031" r="18.199" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#fff36e"/> + <stop offset=".5" stop-color="#fc4055"/> + <stop offset="1" stop-color="#e31587"/> + </radialGradient> + <radialGradient id="b" cx="1.315" cy="3.784" r="10.76" gradientUnits="userSpaceOnUse"> + <stop offset=".001" stop-color="#c60084"/> + <stop offset="1" stop-color="#fc4055" stop-opacity="0"/> + </radialGradient> + <radialGradient id="c" cx="15.858" cy="1.995" r="21.371" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#ffde67" stop-opacity=".6"/> + <stop offset=".093" stop-color="#ffd966" stop-opacity=".581"/> + <stop offset=".203" stop-color="#ffca65" stop-opacity=".525"/> + <stop offset=".321" stop-color="#feb262" stop-opacity=".432"/> + <stop offset=".446" stop-color="#fe8f5e" stop-opacity=".302"/> + <stop offset=".573" stop-color="#fd6459" stop-opacity=".137"/> + <stop offset=".664" stop-color="#fc4055" stop-opacity="0"/> + </radialGradient> + <radialGradient id="d" cx="8.451" cy="8.902" r="27.546" gradientUnits="userSpaceOnUse"> + <stop offset=".153" stop-color="#810220"/> + <stop offset=".167" stop-color="#920b27" stop-opacity=".861"/> + <stop offset=".216" stop-color="#cb2740" stop-opacity=".398"/> + <stop offset=".253" stop-color="#ef394f" stop-opacity=".11"/> + <stop offset=".272" stop-color="#fc4055" stop-opacity="0"/> + </radialGradient> + <radialGradient id="e" cx="6.368" cy="8.555" r="27.542" gradientUnits="userSpaceOnUse"> + <stop offset=".113" stop-color="#810220"/> + <stop offset=".133" stop-color="#920b27" stop-opacity=".861"/> + <stop offset=".204" stop-color="#cb2740" stop-opacity=".398"/> + <stop offset=".257" stop-color="#ef394f" stop-opacity=".11"/> + <stop offset=".284" stop-color="#fc4055" stop-opacity="0"/> + </radialGradient> + <radialGradient id="f" cx="13.937" cy="2.416" r="17.079" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#ff9640"/> + <stop offset=".8" stop-color="#fc4055"/> + </radialGradient> + <radialGradient id="g" cx="13.937" cy="2.416" r="17.079" gradientUnits="userSpaceOnUse"> + <stop offset=".084" stop-color="#ffde67"/> + <stop offset=".147" stop-color="#ffdc66" stop-opacity=".968"/> + <stop offset=".246" stop-color="#ffd562" stop-opacity=".879"/> + <stop offset=".369" stop-color="#ffcb5d" stop-opacity=".734"/> + <stop offset=".511" stop-color="#ffbc55" stop-opacity=".533"/> + <stop offset=".667" stop-color="#ffaa4b" stop-opacity=".28"/> + <stop offset=".822" stop-color="#ff9640" stop-opacity="0"/> + </radialGradient> + <radialGradient id="h" cx="10.011" cy="7.729" r="8.36" gradientTransform="matrix(.247 .969 -1.011 .258 15.352 -3.965)" gradientUnits="userSpaceOnUse"> + <stop offset=".363" stop-color="#fc4055"/> + <stop offset=".443" stop-color="#fd604d" stop-opacity=".633"/> + <stop offset=".545" stop-color="#fe8644" stop-opacity=".181"/> + <stop offset=".59" stop-color="#ff9640" stop-opacity="0"/> + </radialGradient> + <radialGradient id="i" cx="8.575" cy="8.439" r="8.353" gradientUnits="userSpaceOnUse"> + <stop offset=".216" stop-color="#fc4055" stop-opacity=".8"/> + <stop offset=".267" stop-color="#fd5251" stop-opacity=".633"/> + <stop offset=".41" stop-color="#fe8345" stop-opacity=".181"/> + <stop offset=".474" stop-color="#ff9640" stop-opacity="0"/> + </radialGradient> + <radialGradient id="j" cx="17.326" cy=".487" r="28.887" gradientUnits="userSpaceOnUse"> + <stop offset=".054" stop-color="#fff36e"/> + <stop offset=".457" stop-color="#ff9640"/> + <stop offset=".639" stop-color="#ff9640"/> + </radialGradient> + <linearGradient id="k" x1="8.117" y1="-.134" x2="12.46" y2="12.441" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#b833e1"/> + <stop offset=".371" stop-color="#9059ff"/> + <stop offset=".614" stop-color="#5b6df8"/> + <stop offset="1" stop-color="#0090ed"/> + </linearGradient> + <linearGradient id="l" x1="5.542" y1=".065" x2="13.614" y2="8.137" gradientUnits="userSpaceOnUse"> + <stop offset=".805" stop-color="#722291" stop-opacity="0"/> + <stop offset="1" stop-color="#592acb" stop-opacity=".5"/> + </linearGradient> + <linearGradient id="m" x1="11.836" y1="1.378" x2="3.632" y2="15.587" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#fff36e" stop-opacity=".8"/> + <stop offset=".094" stop-color="#fff36e" stop-opacity=".699"/> + <stop offset=".752" stop-color="#fff36e" stop-opacity="0"/> + </linearGradient> + </defs> + <g style="isolation:isolate"> + <path d="M14.389 3.14A7.894 7.894 0 0 0 8.318 0a7 7 0 0 0-3.867.97A7.472 7.472 0 0 1 8.059.1a7.1 7.1 0 0 1 7.071 6.087 7 7 0 0 1-6.9 8.2 7.151 7.151 0 0 1-3.949-1.127C1.268 11.3 1.258 7.441 1.26 6.825a8.626 8.626 0 0 1 1.189-4.266A6.656 6.656 0 0 0 .576 4.984a7.734 7.734 0 0 0-.519 4.035c.012.1.023.207.036.31a8.013 8.013 0 1 0 14.3-6.189z" fill="url(#a)"/> + <path d="M14.389 3.14A7.894 7.894 0 0 0 8.318 0a7 7 0 0 0-3.867.97A7.472 7.472 0 0 1 8.059.1a7.1 7.1 0 0 1 7.071 6.087 7 7 0 0 1-6.9 8.2 7.151 7.151 0 0 1-3.949-1.127C1.268 11.3 1.258 7.441 1.26 6.825a8.626 8.626 0 0 1 1.189-4.266A6.656 6.656 0 0 0 .576 4.984a7.734 7.734 0 0 0-.519 4.035c.012.1.023.207.036.31a8.013 8.013 0 1 0 14.3-6.189z" fill="url(#b)" opacity=".67"/> + <path d="M14.389 3.14A7.894 7.894 0 0 0 8.318 0a7 7 0 0 0-3.867.97A7.472 7.472 0 0 1 8.059.1a7.1 7.1 0 0 1 7.071 6.087 7 7 0 0 1-6.9 8.2 7.151 7.151 0 0 1-3.949-1.127C1.268 11.3 1.258 7.441 1.26 6.825a8.626 8.626 0 0 1 1.189-4.266A6.656 6.656 0 0 0 .576 4.984a7.734 7.734 0 0 0-.519 4.035c.012.1.023.207.036.31a8.013 8.013 0 1 0 14.3-6.189z" fill="url(#c)"/> + <path d="M14.389 3.14A7.894 7.894 0 0 0 8.318 0a7 7 0 0 0-3.867.97A7.472 7.472 0 0 1 8.059.1a7.1 7.1 0 0 1 7.071 6.087 7 7 0 0 1-6.9 8.2 7.151 7.151 0 0 1-3.949-1.127C1.268 11.3 1.258 7.441 1.26 6.825a8.626 8.626 0 0 1 1.189-4.266A6.656 6.656 0 0 0 .576 4.984a7.734 7.734 0 0 0-.519 4.035c.012.1.023.207.036.31a8.013 8.013 0 1 0 14.3-6.189z" fill="url(#d)"/> + <path d="M14.389 3.14A7.894 7.894 0 0 0 8.318 0a7 7 0 0 0-3.867.97A7.472 7.472 0 0 1 8.059.1a7.1 7.1 0 0 1 7.071 6.087 7 7 0 0 1-6.9 8.2 7.151 7.151 0 0 1-3.949-1.127C1.268 11.3 1.258 7.441 1.26 6.825a8.626 8.626 0 0 1 1.189-4.266A6.656 6.656 0 0 0 .576 4.984a7.734 7.734 0 0 0-.519 4.035c.012.1.023.207.036.31a8.013 8.013 0 1 0 14.3-6.189z" fill="url(#e)"/> + <path d="M15.325 5.965C14.875 1.9 11.253.078 8.059.1a7.765 7.765 0 0 0-3.608.872 3.913 3.913 0 0 0-.712.54c.026-.021.1-.085.23-.172l.013-.009.011-.007A5.337 5.337 0 0 1 5.531.609 8.713 8.713 0 0 1 8.168.3a6.65 6.65 0 0 1 6.25 6.4 4.818 4.818 0 0 1-4.58 4.869 4.731 4.731 0 0 1-2.967-.72A5.425 5.425 0 0 1 5.06 8.242a4.552 4.552 0 0 1 .285-3.149A4.726 4.726 0 0 1 8.464 2.7a4.3 4.3 0 0 0-1.782-.585A5.4 5.4 0 0 0 1.7 5.177a6.035 6.035 0 0 0-.2 4.638 6.683 6.683 0 0 0 2.4 3.234A7.177 7.177 0 0 0 7.326 14.4s.153.018.309.029a8.085 8.085 0 0 0 5.439-1.6c2.811-2.377 2.315-6.285 2.251-6.864z" fill="url(#f)"/> + <path d="M15.325 5.965C14.875 1.9 11.253.078 8.059.1a7.765 7.765 0 0 0-3.608.872 3.913 3.913 0 0 0-.712.54c.026-.021.1-.085.23-.172l.013-.009.011-.007A5.337 5.337 0 0 1 5.531.609 8.713 8.713 0 0 1 8.168.3a6.65 6.65 0 0 1 6.25 6.4 4.818 4.818 0 0 1-4.58 4.869 4.731 4.731 0 0 1-2.967-.72A5.425 5.425 0 0 1 5.06 8.242a4.552 4.552 0 0 1 .285-3.149A4.726 4.726 0 0 1 8.464 2.7a4.3 4.3 0 0 0-1.782-.585A5.4 5.4 0 0 0 1.7 5.177a6.035 6.035 0 0 0-.2 4.638 6.683 6.683 0 0 0 2.4 3.234A7.177 7.177 0 0 0 7.326 14.4s.153.018.309.029a8.085 8.085 0 0 0 5.439-1.6c2.811-2.377 2.315-6.285 2.251-6.864z" fill="url(#g)"/> + <path d="M15.325 5.965C14.875 1.9 11.253.078 8.059.1a7.765 7.765 0 0 0-3.608.872 3.913 3.913 0 0 0-.712.54c.026-.021.1-.085.23-.172l.013-.009.011-.007A5.337 5.337 0 0 1 5.531.609 8.713 8.713 0 0 1 8.168.3a6.65 6.65 0 0 1 6.25 6.4 4.818 4.818 0 0 1-4.58 4.869 4.731 4.731 0 0 1-2.967-.72A5.425 5.425 0 0 1 5.06 8.242a4.552 4.552 0 0 1 .285-3.149A4.726 4.726 0 0 1 8.464 2.7a4.3 4.3 0 0 0-1.782-.585A5.4 5.4 0 0 0 1.7 5.177a6.035 6.035 0 0 0-.2 4.638 6.683 6.683 0 0 0 2.4 3.234A7.177 7.177 0 0 0 7.326 14.4s.153.018.309.029a8.085 8.085 0 0 0 5.439-1.6c2.811-2.377 2.315-6.285 2.251-6.864z" style="mix-blend-mode:multiply" opacity=".53" fill="url(#h)"/> + <path d="M15.325 5.965C14.875 1.9 11.253.078 8.059.1a7.765 7.765 0 0 0-3.608.872 3.913 3.913 0 0 0-.712.54c.026-.021.1-.085.23-.172l.013-.009.011-.007A5.337 5.337 0 0 1 5.531.609 8.713 8.713 0 0 1 8.168.3a6.65 6.65 0 0 1 6.25 6.4 4.818 4.818 0 0 1-4.58 4.869 4.731 4.731 0 0 1-2.967-.72A5.425 5.425 0 0 1 5.06 8.242a4.552 4.552 0 0 1 .285-3.149A4.726 4.726 0 0 1 8.464 2.7a4.3 4.3 0 0 0-1.782-.585A5.4 5.4 0 0 0 1.7 5.177a6.035 6.035 0 0 0-.2 4.638 6.683 6.683 0 0 0 2.4 3.234A7.177 7.177 0 0 0 7.326 14.4s.153.018.309.029a8.085 8.085 0 0 0 5.439-1.6c2.811-2.377 2.315-6.285 2.251-6.864z" style="mix-blend-mode:multiply" opacity=".53" fill="url(#i)"/> + <path d="M9.24 11.568a5.148 5.148 0 0 0 3.183-.815 5.67 5.67 0 0 0 2.39-4.234C14.957 3.381 13.094 0 8.168.3a8.713 8.713 0 0 0-2.637.309 5.745 5.745 0 0 0-1.538.715l-.011.007-.013.009c-.076.054-.151.11-.224.168a6.7 6.7 0 0 1 4.2-.787c2.827.371 5.413 2.571 5.413 5.475a4.076 4.076 0 0 1-3.747 3.817A2.849 2.849 0 0 1 6.9 8.156a2.75 2.75 0 0 1 .919-2.729 2.875 2.875 0 0 0-1.81.919A3.07 3.07 0 0 0 5.735 9.6c.84 1.746 3.031 1.929 3.505 1.968z" fill="url(#j)"/> + <path d="M14.4 3.745a4.5 4.5 0 0 0-.976-1.629 6.056 6.056 0 0 0-1.819-1.3A8.086 8.086 0 0 0 9.82.184 7.96 7.96 0 0 0 6.507.165a5.727 5.727 0 0 0-2.768 1.346 6.415 6.415 0 0 1 1.606-.64 6.712 6.712 0 0 1 6.234 1.619 5.417 5.417 0 0 1 .866 1.061 4.693 4.693 0 0 1 .123 4.773 3.8 3.8 0 0 1-2.914 1.691A4.726 4.726 0 0 0 14 7.839a4.88 4.88 0 0 0 .4-4.094z" fill="url(#k)"/> + <path d="M14.4 3.745a4.5 4.5 0 0 0-.976-1.629 6.056 6.056 0 0 0-1.819-1.3A8.086 8.086 0 0 0 9.82.184 7.96 7.96 0 0 0 6.507.165a5.727 5.727 0 0 0-2.768 1.346 6.415 6.415 0 0 1 1.606-.64 6.712 6.712 0 0 1 6.234 1.619 5.417 5.417 0 0 1 .866 1.061 4.693 4.693 0 0 1 .123 4.773 3.8 3.8 0 0 1-2.914 1.691A4.726 4.726 0 0 0 14 7.839a4.88 4.88 0 0 0 .4-4.094z" fill="url(#l)"/> + <path d="M8.318 0h-.073c.134 0 .269.013.4.022C8.538.021 8.429 0 8.318 0zM3.747 1.5a3.951 3.951 0 0 1 .453-.359 3.547 3.547 0 0 0-.453.364zm1.7-.653c-.032.008-.066.01-.1.019-.07.022-.147.046-.223.068.101-.029.209-.056.319-.082zm-1.7.658zm0 0zM14.389 3.14a8.12 8.12 0 0 0-.675-.77 6.368 6.368 0 0 0-.747-.677c-.072-.063-.156-.116-.233-.176a5.136 5.136 0 0 1 .693.6 4.5 4.5 0 0 1 .973 1.628 4.88 4.88 0 0 1-.4 4.094 4.723 4.723 0 0 1-4.342 2.175 2.609 2.609 0 0 0 .578-.07 2.81 2.81 0 0 1-.625.069A2.849 2.849 0 0 1 6.9 8.156a2.749 2.749 0 0 1 .919-2.729 2.875 2.875 0 0 0-1.81.919A3.07 3.07 0 0 0 5.735 9.6c.03.062.073.109.107.167a4.744 4.744 0 0 1-.782-1.525 4.552 4.552 0 0 1 .285-3.149A4.726 4.726 0 0 1 8.464 2.7a4.3 4.3 0 0 0-1.782-.585A5.4 5.4 0 0 0 1.7 5.177a5.133 5.133 0 0 0-.414 1.17 8.715 8.715 0 0 1 1.163-3.788A6.656 6.656 0 0 0 .576 4.984a7.734 7.734 0 0 0-.519 4.035c.012.1.023.207.036.31a8.013 8.013 0 1 0 14.3-6.189zM4.541.923c-.026.016-.065.033-.09.049.011-.007.025-.011.036-.018s.037-.02.054-.031zm-.09.049c-.017.01-.028.019-.044.029.025-.016.053-.03.079-.046a.378.378 0 0 0-.035.017z" fill="url(#m)"/> + </g> +</svg> diff --git a/toolkit/themes/shared/extensions/rating-star.svg b/toolkit/themes/shared/extensions/rating-star.svg new file mode 100644 index 0000000000..c23bef36e8 --- /dev/null +++ b/toolkit/themes/shared/extensions/rating-star.svg @@ -0,0 +1,43 @@ +<?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" width="64" height="64" viewBox="0 0 64 64"> + <!-- + This image defines three versions of the star: + #full = star filled with full color + #half = half-filled star (full color at left, transparent color at right) + #empty = star filled with transparent color + --> + + <!-- Default image: full star --> + <view id="full" viewBox="0 0 64 64" /> + <view id="half" viewBox="0 64 64 64" /> + <view id="empty" viewBox="0 128 64 64" /> + + <defs> + <g id="star-shape" fill="context-fill" transform="translate(-140.000000, -607.000000)" fill-opacity="context-fill-opacity"> + <path d="M154.994575,670.99995 C153.704598,671.000763 152.477615,670.442079 151.630967,669.468394 C150.784319,668.49471 150.401158,667.201652 150.580582,665.923653 L153.046749,648.259919 L141.193762,635.514481 C140.080773,634.318044 139.711733,632.608076 140.232152,631.058811 C140.752571,629.509546 142.078939,628.369589 143.688275,628.088421 L160.214424,625.130961 L168.013827,609.468577 C168.767364,607.955994 170.3113,607 172.000594,607 C173.689888,607 175.233824,607.955994 175.98736,609.468577 L183.790813,625.130961 L200.329111,628.08437 C201.934946,628.371492 203.25546,629.513805 203.771316,631.062053 C204.287172,632.610301 203.915846,634.316807 202.803377,635.51043 L190.954439,648.26397 L193.420606,665.923653 C193.652457,667.578241 192.93975,669.223573 191.574418,670.185702 C190.209085,671.147831 188.420524,671.265104 186.941351,670.489485 L172.002619,662.698806 L157.047688,670.50569 C156.413201,670.833752 155.708782,671.003331 154.994575,670.99995 Z"></path> + </g> + <clipPath id="left-half"> + <rect x="0" y="0" width="50%" height="100%" /> + </clipPath> + <clipPath id="right-half"> + <rect x="50%" y="0" width="50%" height="100%" /> + </clipPath> + </defs> + + <!-- full --> + <use href="#star-shape" x="0" y="0" /> + + <!-- half --> + <g transform="translate(0, 64)"> + <use href="#star-shape" clip-path="url(#left-half)" /> + <use href="#star-shape" clip-path="url(#right-half)" opacity="0.25" /> + </g> + + <!-- empty --> + <g transform="translate(0, 128)"> + <use href="#star-shape" opacity="0.25" /> + </g> +</svg> diff --git a/toolkit/themes/shared/extensions/recommended.svg b/toolkit/themes/shared/extensions/recommended.svg new file mode 100644 index 0000000000..50e76612df --- /dev/null +++ b/toolkit/themes/shared/extensions/recommended.svg @@ -0,0 +1,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 width="12" height="12" xmlns="http://www.w3.org/2000/svg"> + <g fill="context-fill"> + <path d="M11.45 0H.55C.25 0 0 .22 0 .5V3c0 1.1.98 2 2.18 2h.05a3.67 3.67 0 0 0 3.22 2.96V9.5h1.1V7.96A3.67 3.67 0 0 0 9.77 5h.05C11.02 5 12 4.1 12 3V.5c0-.28-.24-.5-.55-.5zM1.1 3V1h1.1v3c-.61 0-1.1-.45-1.1-1zm9.82 0c0 .55-.49 1-1.1 1V1h1.1v2zM7.1 10H4.9c-2.72 0-2.72 2-2.72 2h7.64s0-2-2.73-2z"/> + </g> +</svg> diff --git a/toolkit/themes/shared/findBar.inc.css b/toolkit/themes/shared/findBar.inc.css new file mode 100644 index 0000000000..87fe4d5d89 --- /dev/null +++ b/toolkit/themes/shared/findBar.inc.css @@ -0,0 +1,175 @@ +/* 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"); + +findbar { + border-top: 1px solid ThreeDShadow; + min-width: 1px; + transition-property: margin-bottom, opacity, visibility; + transition-duration: 150ms, 150ms, 0s; + transition-timing-function: ease-in-out, ease-in-out, linear; +} + +findbar[hidden] { + /* Override display:none to make the transition work. */ + display: -moz-box; + visibility: collapse; + margin-bottom: -1em; + opacity: 0; + transition-delay: 0s, 0s, 150ms; +} + +findbar[noanim] { + transition-duration: 0s !important; + transition-delay: 0s !important; +} + +.findbar-container { + padding-block: 4px; + padding-inline-start: 8px; +} + +.findbar-closebutton { + padding: 0 8px; +} + +/* Search field */ + +/* Don't apply theme colors on findbar when header image is applied to avoid +contrast issues, see bug 1506913 */ +html|html[lwtheme-image] findbar { + --lwt-toolbar-field-background-color: initial; + --lwt-toolbar-field-color: initial; + --lwt-toolbar-field-border-color: initial; + --lwt-toolbar-field-focus: initial; + --lwt-toolbar-field-focus-color: initial; +} + +html|input.findbar-textbox { + appearance: none; + background-color: Field; + border: 1px solid var(--lwt-toolbar-field-border-color, ThreeDShadow); + border-start-start-radius: 2px; + border-end-start-radius: 2px; + outline: none; + margin: 0; + padding: 2px 5px; + width: 14em; +} + +html|input.findbar-textbox:-moz-lwtheme { + background-color: var(--lwt-toolbar-field-background-color, Field); + color: var(--lwt-toolbar-field-color, FieldText); +} + +html|input.findbar-textbox:focus { + background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, Field)); + color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, FieldText)); + border-color: var(--toolbar-field-focus-border-color, Highlight); +} + +html|input.findbar-textbox[status="notfound"] { + background-color: rgba(255,0,57,.3); + color: inherit; +} + +html|input.findbar-textbox[flash="true"] { + background-color: rgba(255,233,0,.3); + color: inherit; +} + +html|input.findbar-textbox.minimal { + border-radius: 2px; +} + +.findbar-find-previous, +.findbar-find-next { + margin-inline-start: 0; + appearance: none; + background: rgba(255,255,255,.2); + border: 1px solid ThreeDShadow; + padding: 2px 5px; + line-height: 1em; + -moz-context-properties: fill; + fill: currentColor; + color: inherit; +} + +.findbar-find-previous:not([disabled]):hover, +.findbar-find-next:not([disabled]):hover { + background: rgba(190,190,190,.2); +} + +.findbar-find-previous:not([disabled]):hover:active, +.findbar-find-next:not([disabled]):hover:active { + background: rgba(23,50,76,.2); + box-shadow: 0 1px 2px rgba(10,31,51,.2) inset; +} + +.findbar-find-previous { + list-style-image: url(chrome://global/skin/icons/find-previous-arrow.svg); + border-inline-width: 0; + margin-inline-end: 0; +} + +.findbar-find-next { + list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg); + border-start-end-radius: 2px; + border-end-end-radius: 2px; +} + +.findbar-find-next:-moz-lwtheme, +.findbar-find-previous:-moz-lwtheme { + border-color: var(--lwt-toolbar-field-border-color, ThreeDShadow); +} + +.findbar-find-previous > .toolbarbutton-icon, +.findbar-find-next > .toolbarbutton-icon { + margin: 0; +} + +.findbar-find-previous[disabled="true"] > .toolbarbutton-icon, +.findbar-find-next[disabled="true"] > .toolbarbutton-icon { + opacity: .4; +} + +.findbar-highlight, +.findbar-case-sensitive, +.findbar-match-diacritics, +.findbar-entire-word { + margin-inline-start: 5px; +} + +.findbar-highlight > .toolbarbutton-icon, +.findbar-case-sensitive > .toolbarbutton-icon, +.findbar-match-diacritics > .toolbarbutton-icon, +.findbar-entire-word > .toolbarbutton-icon { + display: none; +} + +.findbar-find-status, +.found-matches { + color: GrayText; + margin: 0 !important; + margin-inline-start: 12px !important; +} + +.findbar-find-status:-moz-lwtheme, +.found-matches:-moz-lwtheme { + color: inherit; + opacity: .6; +} + +.find-status-icon[status="pending"] { + list-style-image: url("chrome://global/skin/icons/loading.png"); +} + +@media (min-resolution: 1.1dppx) { + .find-status-icon[status="pending"] { + width: 16px; + list-style-image: url("chrome://global/skin/icons/loading@2x.png"); + } +} diff --git a/toolkit/themes/shared/global.inc.css b/toolkit/themes/shared/global.inc.css new file mode 100644 index 0000000000..d9b8589bbe --- /dev/null +++ b/toolkit/themes/shared/global.inc.css @@ -0,0 +1,108 @@ +/* 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/. */ + +/* all localizable skin settings shall live here */ +@import url("chrome://global/locale/intl.css"); +@import url("chrome://global/content/widgets.css"); + +@import url("close-icon.css"); + +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* General styles */ + +*|*.plain { + appearance: none; + margin: 0 !important; + border: none; + padding: 0; +} + +html|button, +html|input, +html|textarea { + font: inherit; +} + +/* Textbox context menu */ + +.textbox-contextmenu:-moz-locale-dir(rtl) { + direction: rtl; +} + +/* Autoscroll popup */ + +.autoscroller { + border: none; + padding: 0; + background-image: url("chrome://global/skin/icons/autoscroll.svg"); + background-size: contain; + background-color: transparent; + background-repeat: no-repeat; + appearance: none; + -moz-window-shadow: none; + /* Set pointer-events: none; so that mousemove events can be handled by AutoScrollChild.jsm. */ + pointer-events: none; +} + +.autoscroller[scrolldir="NS"] { + background-image: url("chrome://global/skin/icons/autoscroll-vertical.svg"); +} + +.autoscroller[scrolldir="EW"] { + background-image: url("chrome://global/skin/icons/autoscroll-horizontal.svg"); +} + +/* Panel footers */ + +.panel-footer { + background-color: var(--arrowpanel-dimmed); +} + +.panel-footer > xul|button { + appearance: none; + border-top: 1px solid var(--panel-separator-color); + /* !important overrides :hover and :active colors from button.css: */ + color: inherit !important; + min-width: 0; + margin: 0; + padding: .9em 2px; +} + +.panel-footer > xul|button[disabled] { + color: var(--panel-disabled-color) !important; +} + +.panel-footer > xul|button:-moz-focusring { + outline: 1px dotted; + outline-offset: -3px; +} + +.panel-footer > xul|button:not([disabled]):hover { + background-color: var(--arrowpanel-dimmed); +} + +.panel-footer > xul|button:not([disabled]):hover:active, +.panel-footer > xul|button:not([disabled])[open] { + background-color: var(--arrowpanel-dimmed-further); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; +} + +.panel-footer > xul|button:not([disabled])[default] { + color: white !important; + background-color: #0060df; +} + +.panel-footer > xul|button:not([disabled])[default]:hover { + background-color: #003eaa; +} + +.panel-footer > xul|button:not([disabled])[default]:hover:active { + background-color: #002275; +} + +.panel-footer > xul|button > .button-box { + padding: 0; +} diff --git a/toolkit/themes/shared/icons/arrow-dropdown-12.svg b/toolkit/themes/shared/icons/arrow-dropdown-12.svg new file mode 100644 index 0000000000..1a784357ce --- /dev/null +++ b/toolkit/themes/shared/icons/arrow-dropdown-12.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="M6 9a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414L6 6.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3A1 1 0 0 1 6 9z"/> +</svg> diff --git a/toolkit/themes/shared/icons/arrow-dropdown-16.svg b/toolkit/themes/shared/icons/arrow-dropdown-16.svg new file mode 100644 index 0000000000..7fa4005493 --- /dev/null +++ b/toolkit/themes/shared/icons/arrow-dropdown-16.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="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 12a1 1 0 0 1-.707-.293l-5-5a1 1 0 0 1 1.414-1.414L8 9.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 8 12z"></path> +</svg> diff --git a/toolkit/themes/shared/icons/arrow-left.svg b/toolkit/themes/shared/icons/arrow-left.svg new file mode 100644 index 0000000000..dee5931866 --- /dev/null +++ b/toolkit/themes/shared/icons/arrow-left.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="16" height="16"> + <path fill="context-fill" fill-opacity="context-fill-opacity" d="M6.414 8l4.293-4.293a1 1 0 0 0-1.414-1.414l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414z"/> +</svg> diff --git a/toolkit/themes/shared/icons/arrow-up-12.svg b/toolkit/themes/shared/icons/arrow-up-12.svg new file mode 100644 index 0000000000..d881044a94 --- /dev/null +++ b/toolkit/themes/shared/icons/arrow-up-12.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="M6 3a1 1 0 0 0-.707.293l-3 3a1 1 0 0 0 1.414 1.414L6 5.414l2.293 2.293a1 1 0 0 0 1.414-1.414l-3-3A1 1 0 0 0 6 3z"/> +</svg> diff --git a/toolkit/themes/shared/icons/autoscroll-horizontal.svg b/toolkit/themes/shared/icons/autoscroll-horizontal.svg new file mode 100644 index 0000000000..1a66636e2d --- /dev/null +++ b/toolkit/themes/shared/icons/autoscroll-horizontal.svg @@ -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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"> + <circle cx="16" cy="16" r="14" fill="#f9f9fa" fill-opacity=".8"/> + <path d="M16 31a15 15 0 1 1 15-15 15.017 15.017 0 0 1-15 15zm0-29a14 14 0 1 0 14 14A14.016 14.016 0 0 0 16 2z" fill="#0c0c0d" fill-opacity=".6"/> + <path d="M10.707 11.293a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 0 1.414l4 4a1 1 0 0 0 1.414-1.414L7.414 16l3.293-3.293a1 1 0 0 0 0-1.414zm16 4l-4-4a1 1 0 0 0-1.414 1.414L24.586 16l-3.293 3.293a1 1 0 1 0 1.414 1.414l4-4a1 1 0 0 0 0-1.414z" fill="#0c0c0d" fill-opacity=".8"/> + <circle cx="16" cy="16" r="2" fill="#0c0c0d" fill-opacity=".6"/> +</svg> diff --git a/toolkit/themes/shared/icons/autoscroll-vertical.svg b/toolkit/themes/shared/icons/autoscroll-vertical.svg new file mode 100644 index 0000000000..88d8f793dc --- /dev/null +++ b/toolkit/themes/shared/icons/autoscroll-vertical.svg @@ -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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"> + <circle cx="16" cy="16" r="14" fill="#f9f9fa" fill-opacity=".8"/> + <path d="M16 31a15 15 0 1 1 15-15 15.017 15.017 0 0 1-15 15zm0-29a14 14 0 1 0 14 14A14.016 14.016 0 0 0 16 2z" fill="#0c0c0d" fill-opacity=".6"/> + <path d="M19.293 21.293L16 24.586l-3.293-3.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414zm-2.586-16a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414L16 7.414l3.293 3.293a1 1 0 0 0 1.414-1.414z" fill="#0c0c0d" fill-opacity=".8"/> + <circle cx="16" cy="16" r="2" fill="#0c0c0d" fill-opacity=".6"/> +</svg> diff --git a/toolkit/themes/shared/icons/autoscroll.svg b/toolkit/themes/shared/icons/autoscroll.svg new file mode 100644 index 0000000000..daaefa8239 --- /dev/null +++ b/toolkit/themes/shared/icons/autoscroll.svg @@ -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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"> + <circle cx="16" cy="16" r="14" fill="#f9f9fa" fill-opacity=".8"/> + <path d="M16 31a15 15 0 1 1 15-15 15.017 15.017 0 0 1-15 15zm0-29a14 14 0 1 0 14 14A14.016 14.016 0 0 0 16 2z" fill="#0c0c0d" fill-opacity=".6"/> + <path d="M18.293 22.293L16 24.586l-2.293-2.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414zm-1.586-17a1 1 0 0 0-1.414 0l-3 3a1 1 0 0 0 1.414 1.414L16 7.414l2.293 2.293a1 1 0 0 0 1.414-1.414zm-7 7a1 1 0 0 0-1.414 0l-3 3a1 1 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414-1.414L7.414 16l2.293-2.293a1 1 0 0 0 0-1.414zm17 3l-3-3a1 1 0 0 0-1.414 1.414L24.586 16l-2.293 2.293a1 1 0 1 0 1.414 1.414l3-3a1 1 0 0 0 0-1.414z" fill="#0c0c0d" fill-opacity=".8"/> + <circle cx="16" cy="16" r="2" fill="#0c0c0d" fill-opacity=".6"/> +</svg> diff --git a/toolkit/themes/shared/icons/check-partial.svg b/toolkit/themes/shared/icons/check-partial.svg new file mode 100644 index 0000000000..22838d0605 --- /dev/null +++ b/toolkit/themes/shared/icons/check-partial.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="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" stroke="context-stroke none" stroke-width="0.5"> + <rect x="2" y="7" width="12" height="2" rx="1"/> +</svg> diff --git a/toolkit/themes/shared/icons/check.svg b/toolkit/themes/shared/icons/check.svg new file mode 100644 index 0000000000..6faa40dad3 --- /dev/null +++ b/toolkit/themes/shared/icons/check.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="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" fill-opacity="context-fill-opacity" stroke="context-stroke none" stroke-width="0.5" d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/> +</svg> diff --git a/toolkit/themes/shared/icons/chevron.svg b/toolkit/themes/shared/icons/chevron.svg new file mode 100644 index 0000000000..10ae82b088 --- /dev/null +++ b/toolkit/themes/shared/icons/chevron.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="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" fill-opacity="context-fill-opacity" d="M8.707,7.293l-5-5A1,1,0,0,0,2.293,3.707L6.586,8,2.293,12.293a1,1,0,1,0,1.414,1.414l5-5A1,1,0,0,0,8.707,7.293Zm6,0-5-5A1,1,0,0,0,8.293,3.707L12.586,8,8.293,12.293a1,1,0,1,0,1.414,1.414l5-5A1,1,0,0,0,14.707,7.293Z"/> +</svg> diff --git a/toolkit/themes/shared/icons/close.svg b/toolkit/themes/shared/icons/close.svg new file mode 100644 index 0000000000..e5eaf5159b --- /dev/null +++ b/toolkit/themes/shared/icons/close.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="20" height="20"> + <rect fill="context-fill" fill-opacity="context-fill-opacity" width="20" height="20" rx="2" ry="2"/> + <path fill="context-fill" fill-opacity="context-stroke-opacity" d="M11.06 10l3.47-3.47a.75.75 0 0 0-1.06-1.06L10 8.94 6.53 5.47a.75.75 0 1 0-1.06 1.06L8.94 10l-3.47 3.47a.75.75 0 1 0 1.06 1.06L10 11.06l3.47 3.47a.75.75 0 0 0 1.06-1.06z"/> +</svg> diff --git a/toolkit/themes/shared/icons/columnpicker.svg b/toolkit/themes/shared/icons/columnpicker.svg new file mode 100644 index 0000000000..3a41c51d84 --- /dev/null +++ b/toolkit/themes/shared/icons/columnpicker.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" fill="context-fill"> + <path d="M2.03 2.06l-.03 8h4v-1H3l.03-4H6v1.97h1V5.06h2.97v2h1v-5H2.03zm1 1H6v1H3.03v-1zm3.97 0h2.97v1H7v-1zm5.53 4.97l-5.94.03 2.91 3.35 3.03-3.38z"/> +</svg> diff --git a/toolkit/themes/shared/icons/connection-mixed-active-loaded.svg b/toolkit/themes/shared/icons/connection-mixed-active-loaded.svg new file mode 100644 index 0000000000..133e411e3d --- /dev/null +++ b/toolkit/themes/shared/icons/connection-mixed-active-loaded.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="16" height="16" viewBox="0 0 16 16"> + <path d="M12.5 6.984h-.484L4 15h8.5a1.5 1.5 0 0 0 1.5-1.5V8.484a1.5 1.5 0 0 0-1.5-1.5zm-6.5 0V5a2 2 0 0 1 4 0v1l1.892-1.892A4 4 0 0 0 4 5v1.984h-.5a1.5 1.5 0 0 0-1.5 1.5V13.5a1.483 1.483 0 0 0 .07.43l6.946-6.946z" fill="context-fill" fill-opacity="context-fill-opacity"/> + <path d="M2 15a1 1 0 0 1-.707-1.707l12-12a1 1 0 0 1 1.414 1.414l-12 12A1 1 0 0 1 2 15z" fill="#ff0039"/> +</svg> diff --git a/toolkit/themes/shared/icons/connection-mixed-passive-loaded.svg b/toolkit/themes/shared/icons/connection-mixed-passive-loaded.svg new file mode 100644 index 0000000000..86dd472a01 --- /dev/null +++ b/toolkit/themes/shared/icons/connection-mixed-passive-loaded.svg @@ -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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <path d="M8 1a4 4 0 0 0-4 4v1.984h-.5a1.5 1.5 0 0 0-1.5 1.5V13.5A1.5 1.5 0 0 0 3.5 15h2.535a2.274 2.274 0 0 1 .207-1.318L9.43 7.27a2.266 2.266 0 0 1 .2-.286H6V5a2 2 0 0 1 4 0v1.568A2.255 2.255 0 0 1 11.478 6a2.283 2.283 0 0 1 .522.073V5a4 4 0 0 0-4-4z" fill="context-fill" fill-opacity="context-fill-opacity"/> + <path d="M15.818 14.127l-3.189-6.411a1.285 1.285 0 0 0-2.3 0l-3.192 6.411A1.294 1.294 0 0 0 8.289 16h6.377a1.294 1.294 0 0 0 1.152-1.873z" fill="#ffbf00"/> + <path d="M11.478 8a.272.272 0 0 1 .256.161l3.188 6.412a.291.291 0 0 1-.013.291.275.275 0 0 1-.243.137H8.289a.275.275 0 0 1-.243-.137.29.29 0 0 1-.013-.291l3.188-6.412A.272.272 0 0 1 11.478 8m0-1a1.272 1.272 0 0 0-1.152.716l-3.189 6.411A1.294 1.294 0 0 0 8.289 16h6.377a1.294 1.294 0 0 0 1.152-1.873l-3.189-6.411A1.272 1.272 0 0 0 11.478 7z" fill="#d76e00" opacity=".35"/> + <path d="M11.5 12a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-1 0v2a.5.5 0 0 0 .5.5zm0 .809a.691.691 0 1 0 .691.691.691.691 0 0 0-.691-.691z" fill="#fff"/> +</svg> diff --git a/toolkit/themes/shared/icons/delete.svg b/toolkit/themes/shared/icons/delete.svg new file mode 100644 index 0000000000..6740822218 --- /dev/null +++ b/toolkit/themes/shared/icons/delete.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="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M6.5 12a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 0 .5.5zm2 0a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 0 .5.5zm2 0a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 0 .5.5z"/> + <path d="M14 2h-3.05a2.5 2.5 0 0 0-4.9 0H3a1 1 0 0 0 0 2v9a3 3 0 0 0 3 3h5a3 3 0 0 0 3-3V4a1 1 0 0 0 0-2zM8.5 1a1.489 1.489 0 0 1 1.391 1H7.109A1.489 1.489 0 0 1 8.5 1zM12 13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4h7z"/> +</svg> diff --git a/toolkit/themes/shared/icons/document.svg b/toolkit/themes/shared/icons/document.svg new file mode 100644 index 0000000000..4f43653a0e --- /dev/null +++ b/toolkit/themes/shared/icons/document.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" viewBox="0 0 16 16"> + <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.12 3.71l-2.83-2.83A3 3 0 0 0 9.17 0H4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V5.83a3 3 0 0 0-0.88-2.12zM12.59 5H10V2.41zM12 14H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h5v3a1 1 0 0 0 1 1h3v7a1 1 0 0 1-1 1z"/> +</svg> diff --git a/toolkit/themes/shared/icons/error.svg b/toolkit/themes/shared/icons/error.svg new file mode 100644 index 0000000000..97a34f3d5e --- /dev/null +++ b/toolkit/themes/shared/icons/error.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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> + <path d="M8 15c-3.866 0-7-3.134-7-7s3.134-7 7-7 7 3.134 7 7-3.134 7-7 7zM3 7v2h10V7H3z" fill="context-fill" fill-rule="evenodd"/> +</svg> diff --git a/toolkit/themes/shared/icons/find-next-arrow.svg b/toolkit/themes/shared/icons/find-next-arrow.svg new file mode 100644 index 0000000000..f441ca7773 --- /dev/null +++ b/toolkit/themes/shared/icons/find-next-arrow.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="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" d="M8 12a1 1 0 0 1-.707-.293l-5-5a1 1 0 0 1 1.414-1.414L8 9.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 8 12z"/> +</svg> diff --git a/toolkit/themes/shared/icons/find-previous-arrow.svg b/toolkit/themes/shared/icons/find-previous-arrow.svg new file mode 100644 index 0000000000..daff313b0c --- /dev/null +++ b/toolkit/themes/shared/icons/find-previous-arrow.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="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" d="M13 11a1 1 0 0 1-.707-.293L8 6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5 5A1 1 0 0 1 13 11z"/> +</svg> diff --git a/toolkit/themes/shared/icons/folder.svg b/toolkit/themes/shared/icons/folder.svg new file mode 100644 index 0000000000..dfed3af8b4 --- /dev/null +++ b/toolkit/themes/shared/icons/folder.svg @@ -0,0 +1,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" + width="32" height="32" viewBox="0 0 32 32"> + <path fill="context-fill" d="M17.3,9.4c0,0,1.1,0,3.7,0c1.7,0,2,0,5.6,0c0.6,0,0.6,0,1.1,0V9.2c0-1.5-0.9-2.6-2-2.6h-5.8V6.3c0-0.6-1.5-2-2.8-2h-7.1 H7.6H4.9v2.4v2.4v2.2c2.8,0,8.5,0,8.5,0C16.4,11.3,17.3,9.4,17.3,9.4z M29,13c0-0.6-0.6-1.1-1.5-1.7l0,0c-0.2,0-0.6,0-0.9,0 c-2.8,0-3,0-4.8,0c-1.9,0-3.3,0-3.3,0s-1.5,2.4-3.7,2.4c0,0-6.5,0-9.1,0H5.4C3,13.7,3,15.9,3,15.9l1.1,9.7C4.1,27.1,5,28,6.5,28 h19.1c1.5,0,2.4-0.9,2.4-2.4L29,13.7l0,0l0,0C29,13.7,29,13,29,13z" /> +</svg> + diff --git a/toolkit/themes/shared/icons/heart.svg b/toolkit/themes/shared/icons/heart.svg new file mode 100644 index 0000000000..bc2e160814 --- /dev/null +++ b/toolkit/themes/shared/icons/heart.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="16" height="16" fill="context-fill"> + <path d="M8 6s0-4 3.5-4S15 5 15 6c0 4.5-7 9-7 9z"/> + <path d="M8 6s0-4-3.5-4S1 5 1 6c0 4.5 7 9 7 9l1-6z"/> +</svg> diff --git a/toolkit/themes/shared/icons/help.svg b/toolkit/themes/shared/icons/help.svg new file mode 100644 index 0000000000..2010105e32 --- /dev/null +++ b/toolkit/themes/shared/icons/help.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="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 1a7 7 0 1 0 7 7 7.008 7.008 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6.007 6.007 0 0 1-6 6zM8 3.125A2.7 2.7 0 0 0 5.125 6a.875.875 0 0 0 1.75 0c0-1 .6-1.125 1.125-1.125a1.105 1.105 0 0 1 1.13.744.894.894 0 0 1-.53 1.016A2.738 2.738 0 0 0 7.125 9v.337a.875.875 0 0 0 1.75 0v-.37a1.041 1.041 0 0 1 .609-.824A2.637 2.637 0 0 0 10.82 5.16 2.838 2.838 0 0 0 8 3.125zm0 7.625A1.25 1.25 0 1 0 9.25 12 1.25 1.25 0 0 0 8 10.75z"/> +</svg> diff --git a/toolkit/themes/shared/icons/icon-refresh.svg b/toolkit/themes/shared/icons/icon-refresh.svg new file mode 100644 index 0000000000..afcd3baab2 --- /dev/null +++ b/toolkit/themes/shared/icons/icon-refresh.svg @@ -0,0 +1,4 @@ +<!-- 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 https://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="context-fill"><path d="M182.14,25.22a8.43,8.43,0,0,0-9.07-8.38,8.72,8.72,0,0,0-8.38,9.06l1.67,43A78.45,78.45,0,1,0,93.91,177.18a78,78,0,0,0,62.83-31.39,8.73,8.73,0,1,0-14-10.5,61.07,61.07,0,1,1,9.47-54.82c.1.3.32.52.44.8H110.36a8.73,8.73,0,0,0,0,17.46h64.31a8.09,8.09,0,0,0,1.09-.22c.05,0,.09,0,.14,0h.35a8.72,8.72,0,0,0,8.38-9.06Z"/></svg>
diff --git a/toolkit/themes/shared/icons/identity-icon.svg b/toolkit/themes/shared/icons/identity-icon.svg new file mode 100644 index 0000000000..80b57ff43a --- /dev/null +++ b/toolkit/themes/shared/icons/identity-icon.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="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" fill-opacity="context-fill-opacity" fill-rule="evenodd" d="M8 15a7 7 0 1 1 7-7 7 7 0 0 1-7 7zM8 2a6 6 0 1 0 6 6 6 6 0 0 0-6-6zm0 10a1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v3a1 1 0 0 1-1 1zm0-6a1 1 0 1 1 1-1 1 1 0 0 1-1 1z"/> +</svg> diff --git a/toolkit/themes/shared/icons/loading.png b/toolkit/themes/shared/icons/loading.png Binary files differnew file mode 100644 index 0000000000..b886c73eff --- /dev/null +++ b/toolkit/themes/shared/icons/loading.png diff --git a/toolkit/themes/shared/icons/loading@2x.png b/toolkit/themes/shared/icons/loading@2x.png Binary files differnew file mode 100644 index 0000000000..ac928c5853 --- /dev/null +++ b/toolkit/themes/shared/icons/loading@2x.png diff --git a/toolkit/themes/shared/icons/magnifier.svg b/toolkit/themes/shared/icons/magnifier.svg new file mode 100644 index 0000000000..068a686d23 --- /dev/null +++ b/toolkit/themes/shared/icons/magnifier.svg @@ -0,0 +1,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" + width="32" height="32" viewBox="0 0 32 32"> + <path fill="context-fill" d="M12.9,2c6,0,11,5,11,11c0,2.2-0.6,4.2-1.8,6l7.2,7c0.8,0.8,0.8,2.4,0,3.2c-0.6,0.6-1.2,0.8-1.6,0.8s-1.2-0.2-1.6-0.6l-7-7 c-1.8,1.2-3.8,1.8-6,1.8c-6,0-11-5-11-11C2.1,7.2,6.9,2,12.9,2z M12.9,20c3.8,0,7-3.2,7-7s-3.2-7-7-7s-7,3.2-7,7S9.1,20,12.9,20z" /> +</svg> + diff --git a/toolkit/themes/shared/icons/more.svg b/toolkit/themes/shared/icons/more.svg new file mode 100644 index 0000000000..68589ef97a --- /dev/null +++ b/toolkit/themes/shared/icons/more.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="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" fill-opacity="context-fill-opacity" d="M2 6a2 2 0 1 0 2 2 2 2 0 0 0-2-2zm6 0a2 2 0 1 0 2 2 2 2 0 0 0-2-2zm6 0a2 2 0 1 0 2 2 2 2 0 0 0-2-2z"/> +</svg> diff --git a/toolkit/themes/shared/icons/open-in-new.svg b/toolkit/themes/shared/icons/open-in-new.svg new file mode 100644 index 0000000000..f0b7b1263e --- /dev/null +++ b/toolkit/themes/shared/icons/open-in-new.svg @@ -0,0 +1,4 @@ +<!-- 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 viewBox="0 0 12 12" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"><path d="M4 0c.6 0 1 .4 1 1s-.5 1-1 1H3c-.6 0-1 .4-1 1v6c0 .6.4 1 1 1h6c.6 0 1-.4 1-1V8c0-.6.4-1 1-1s1 .4 1 1v1c0 1.7-1.3 3-3 3H3c-1.7 0-3-1.3-3-3V3c0-1.7 1.3-3 3-3zm7 0c.4 0 .8.2.9.6.1.1.1.3.1.4v3c0 .6-.4 1-1 1s-1-.4-1-1v-.6L8.7 4.7c-.2.3-.6.4-1 .3-.3-.1-.6-.4-.7-.7s0-.7.3-1L8.6 2H8c-.5 0-1-.4-1-1s.4-1 1-1z"/></svg>
\ No newline at end of file diff --git a/toolkit/themes/shared/icons/performance.svg b/toolkit/themes/shared/icons/performance.svg new file mode 100644 index 0000000000..00e4cb1d17 --- /dev/null +++ b/toolkit/themes/shared/icons/performance.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" viewBox="0 0 16 16"> + <path fill="context-fill" d="M8 1a8 8 0 0 0-8 8 7.89 7.89 0 0 0 .78 3.43 1 1 0 0 0 .9.57.94.94 0 0 0 .43-.1 1 1 0 0 0 .47-1.33A6.07 6.07 0 0 1 2 9a6 6 0 0 1 12 0 5.93 5.93 0 0 1-.59 2.57 1 1 0 0 0 1.81.86A7.89 7.89 0 0 0 16 9a8 8 0 0 0-8-8z"/> + <path fill="context-fill" d="M11.77 7.08a.5.5 0 0 0-.69.15L8.62 11.1A2.12 2.12 0 0 0 8 11a2 2 0 0 0 0 4 2.05 2.05 0 0 0 1.12-.34 2.31 2.31 0 0 0 .54-.54 2 2 0 0 0 0-2.24 2.31 2.31 0 0 0-.2-.24l2.46-3.87a.5.5 0 0 0-.15-.69z"/> +</svg> diff --git a/toolkit/themes/shared/icons/print.svg b/toolkit/themes/shared/icons/print.svg new file mode 100644 index 0000000000..4d1485b353 --- /dev/null +++ b/toolkit/themes/shared/icons/print.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="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 5h-1V1a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v4H2a2 2 0 0 0-2 2v5h3v3a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-3h3V7a2 2 0 0 0-2-2zM2.5 8a.5.5 0 1 1 .5-.5.5.5 0 0 1-.5.5zm9.5 7H4v-5h8zm0-10H4V1h8zm-6.5 7h4a.5.5 0 0 0 0-1h-4a.5.5 0 1 0 0 1zm0 2h5a.5.5 0 0 0 0-1h-5a.5.5 0 1 0 0 1z"/> +</svg> diff --git a/toolkit/themes/shared/icons/resizer.svg b/toolkit/themes/shared/icons/resizer.svg new file mode 100644 index 0000000000..116b144bef --- /dev/null +++ b/toolkit/themes/shared/icons/resizer.svg @@ -0,0 +1,13 @@ +<!-- 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="15" height="15" viewBox="0 0 15 15"> + <path d="M14.342 2.129l-.482-.483a.5.5 0 0 1 0 .708L2.354 13.86a.5.5 0 0 1-.708 0l.483.482a.5.5 0 0 0 .707 0L14.342 2.836a.5.5 0 0 0 0-.707z" fill="#f9f9fa" opacity=".4"/> + <path d="M14.356 5.649l-.5-.5a.5.5 0 0 1 0 .707l-8 8a.5.5 0 0 1-.707 0l.5.5a.5.5 0 0 0 .707 0l8-8a.5.5 0 0 0 0-.707z" fill="#f9f9fa" opacity=".4"/> + <path d="M14.363 9.158l-.511-.511a.5.5 0 0 1 0 .707l-4.5 4.5a.5.5 0 0 1-.707 0l.511.511a.5.5 0 0 0 .707 0l4.5-4.5a.5.5 0 0 0 0-.707z" fill="#f9f9fa" opacity=".4"/> + <path d="M14.315 12.621l-.468-.468a.5.5 0 0 1 0 .707l-.993.993a.5.5 0 0 1-.707 0l.468.468a.5.5 0 0 0 .707 0l.993-.993a.5.5 0 0 0 0-.707z" fill="#f9f9fa" opacity=".4"/> + <path d="M13.86 1.646a.5.5 0 0 0-.708 0L1.646 13.152a.5.5 0 1 0 .708.708L13.86 2.354a.5.5 0 0 0 0-.708z" fill="#0c0c0d" opacity=".6"/> + <path d="M13.854 5.146a.5.5 0 0 0-.707 0l-8 8a.5.5 0 0 0 .707.707l8-8a.5.5 0 0 0 0-.707z" fill="#0c0c0d" opacity=".6"/> + <path d="M13.852 8.647a.5.5 0 0 0-.707 0l-4.5 4.5a.5.5 0 0 0 .707.707l4.5-4.5a.5.5 0 0 0 0-.707z" fill="#0c0c0d" opacity=".6"/> + <path d="M13.847 12.153a.5.5 0 0 0-.707 0l-.993.993a.5.5 0 1 0 .707.707l.993-.993a.5.5 0 0 0 0-.707z" fill="#0c0c0d" opacity=".6"/> +</svg> diff --git a/toolkit/themes/shared/icons/searchfield-cancel.svg b/toolkit/themes/shared/icons/searchfield-cancel.svg new file mode 100644 index 0000000000..9899144e95 --- /dev/null +++ b/toolkit/themes/shared/icons/searchfield-cancel.svg @@ -0,0 +1,20 @@ +<?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="14" height="14" viewBox="0 0 14 14"> + <style> + circle { + fill: #808080; + } + + line { + stroke: #fff; + stroke-width: 1.5px; + } + </style> + + <circle cx="7" cy="7" r="7" /> + <line x1="4" y1="4" x2="10" y2="10" /> + <line x1="10" y1="4" x2="4" y2="10" /> +</svg>
\ No newline at end of file diff --git a/toolkit/themes/shared/icons/settings.svg b/toolkit/themes/shared/icons/settings.svg new file mode 100644 index 0000000000..147be382eb --- /dev/null +++ b/toolkit/themes/shared/icons/settings.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="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M15 7h-2.1a4.967 4.967 0 0 0-.732-1.753l1.49-1.49a1 1 0 0 0-1.414-1.414l-1.49 1.49A4.968 4.968 0 0 0 9 3.1V1a1 1 0 0 0-2 0v2.1a4.968 4.968 0 0 0-1.753.732l-1.49-1.49a1 1 0 0 0-1.414 1.415l1.49 1.49A4.967 4.967 0 0 0 3.1 7H1a1 1 0 0 0 0 2h2.1a4.968 4.968 0 0 0 .737 1.763c-.014.013-.032.017-.045.03l-1.45 1.45a1 1 0 1 0 1.414 1.414l1.45-1.45c.013-.013.018-.031.03-.045A4.968 4.968 0 0 0 7 12.9V15a1 1 0 0 0 2 0v-2.1a4.968 4.968 0 0 0 1.753-.732l1.49 1.49a1 1 0 0 0 1.414-1.414l-1.49-1.49A4.967 4.967 0 0 0 12.9 9H15a1 1 0 0 0 0-2zM5 8a3 3 0 1 1 3 3 3 3 0 0 1-3-3z"/> +</svg> diff --git a/toolkit/themes/shared/icons/shortcut.svg b/toolkit/themes/shared/icons/shortcut.svg new file mode 100644 index 0000000000..124dba578d --- /dev/null +++ b/toolkit/themes/shared/icons/shortcut.svg @@ -0,0 +1,4 @@ +<!-- 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" viewBox="0 0 16 16"><path fill="context-fill" d="M11 2H5a1 1 0 0 0 0 2h3.59L6.05 6.54a7 7 0 0 0-2 5V13a1 1 0 0 0 2 0v-1.51A5 5 0 0 1 7.46 8L10 5.41V9a1 1 0 0 0 2 0V3a1 1 0 0 0-1-1z"/></svg> diff --git a/toolkit/themes/shared/icons/spinner-arrow-down.svg b/toolkit/themes/shared/icons/spinner-arrow-down.svg new file mode 100644 index 0000000000..9d46bf676f --- /dev/null +++ b/toolkit/themes/shared/icons/spinner-arrow-down.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="10" height="6" viewBox="0 0 10 6"> + <path fill-opacity="context-fill-opacity" fill="context-fill" d="M0 1l1-1 4 4 4-4 1 1-5 5"/> +</svg> diff --git a/toolkit/themes/shared/icons/spinner-arrow-up.svg b/toolkit/themes/shared/icons/spinner-arrow-up.svg new file mode 100644 index 0000000000..34f6d99f9c --- /dev/null +++ b/toolkit/themes/shared/icons/spinner-arrow-up.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="10" height="6" viewBox="0 0 10 6"> + <path fill-opacity="context-fill-opacity" fill="context-fill" d="M0 5l1 1 4-4 4 4 1-1-5-5"/> +</svg> diff --git a/toolkit/themes/shared/icons/twisty-collapsed-rtl.svg b/toolkit/themes/shared/icons/twisty-collapsed-rtl.svg new file mode 100644 index 0000000000..4188607818 --- /dev/null +++ b/toolkit/themes/shared/icons/twisty-collapsed-rtl.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 d="M8.25 11.5a1 1 0 00.75-.29 1 1 0 000-1.42L5.16 6 9 2.21A1 1 0 007.54.79L3 5.29a1 1 0 000 1.42l4.5 4.5a1 1 0 00.75.29z" fill="context-fill"/> +</svg> diff --git a/toolkit/themes/shared/icons/twisty-collapsed.svg b/toolkit/themes/shared/icons/twisty-collapsed.svg new file mode 100644 index 0000000000..3ad38dfa94 --- /dev/null +++ b/toolkit/themes/shared/icons/twisty-collapsed.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 d="M3.75 11.5a1 1 0 01-.75-.29 1 1 0 010-1.42L6.84 6 3 2.21A1 1 0 014.46.79L9 5.29a1 1 0 010 1.42l-4.5 4.5a1 1 0 01-.75.29z" fill="context-fill"/> +</svg> diff --git a/toolkit/themes/shared/icons/twisty-expanded.svg b/toolkit/themes/shared/icons/twisty-expanded.svg new file mode 100644 index 0000000000..5ff2b13ee5 --- /dev/null +++ b/toolkit/themes/shared/icons/twisty-expanded.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 d="M11.5 3.75A1 1 0 0 0 11.21 3a1 1 0 0 0-1.42 0L6 6.84 2.21 3a1 1 0 0 0-1.42 1.46L5.29 9a1 1 0 0 0 1.42 0l4.5-4.5a1 1 0 0 0 0.29-0.75z" fill="context-fill"/> +</svg> diff --git a/toolkit/themes/shared/icons/update-icon.svg b/toolkit/themes/shared/icons/update-icon.svg new file mode 100644 index 0000000000..1235464ce5 --- /dev/null +++ b/toolkit/themes/shared/icons/update-icon.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="16" height="16" fill="context-fill"> + <path d="M8 0C3.581722 0 0 3.581722 0 8s3.581722 8 8 8 8-3.581722 8-8c0-2.121732-.842855-4.156563-2.343146-5.656854C12.156564.842855 10.121732 0 8 0zm3.707 6.707c-.3905.390382-1.0235.390382-1.414 0L9 5.414V13c0 .552285-.447715 1-1 1s-1-.447715-1-1V5.414L5.707 6.707c-.392379.378972-1.016085.373552-1.401819-.012181C3.919448 6.309085 3.914028 5.685379 4.293 5.293l3-3c.3905-.390382 1.0235-.390382 1.414 0l3 3c.390382.3905.390382 1.0235 0 1.414z"/> +</svg> diff --git a/toolkit/themes/shared/icons/warning.svg b/toolkit/themes/shared/icons/warning.svg new file mode 100644 index 0000000000..100c237a3a --- /dev/null +++ b/toolkit/themes/shared/icons/warning.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="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill #FFBF00" d="M14.742 12.106L9.789 2.2a2 2 0 0 0-3.578 0l-4.953 9.91A2 2 0 0 0 3.047 15h9.905a2 2 0 0 0 1.79-2.894zM7 5a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0zm1 8.25A1.25 1.25 0 1 1 9.25 12 1.25 1.25 0 0 1 8 13.25z"/> +</svg> diff --git a/toolkit/themes/shared/illustrations/about-license.svg b/toolkit/themes/shared/illustrations/about-license.svg new file mode 100644 index 0000000000..79498ec594 --- /dev/null +++ b/toolkit/themes/shared/illustrations/about-license.svg @@ -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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"> + <defs> + <linearGradient id="a" x1="-300.021" y1="-272.736" x2="547.138" y2="574.423" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#ccfbff"/> + <stop offset="1" stop-color="#c9e4ff"/> + </linearGradient> + <linearGradient id="b" x1="-18.672" y1="23.78" x2="279.805" y2="322.256" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#00c8d7"/> + <stop offset="1" stop-color="#0a84ff"/> + </linearGradient> + </defs> + <path d="M267.464 87.073h-27.583c-2.347-4.377-8.617-14.64-16.509-16.145-10.217-1.948-12.254 8.237-12.254 8.237s-6.79-17.654-23.97-15.315c-19.262 2.623-10.189 22.9-10.189 22.9h-29l16.568.323h-16.569a1 1 0 0 0 0 2h119.506a1 1 0 0 0 0-2z" fill="#fff"/> + <path d="M100.384 63.259H84.836c-1.212-2.3-4.758-8.29-9.271-9.15-5.682-1.083-6.814 4.58-6.814 4.58s-3.776-9.817-13.33-8.517c-10.712 1.458-5.666 12.735-5.666 12.735H33.629l18.049.352H33.924a1 1 0 1 0 0 2h66.46a1 1 0 0 0 0-2z" fill="#fff"/> + <path d="M122.246 134H26.93a1 1 0 1 1 0-2h95.316a1 1 0 1 1 0 2z" fill="#eaeaee"/> + <path d="M106.678 127.455H60.912a.5.5 0 1 1 0-1h45.766a.5.5 0 0 1 0 1z" fill="#eaeaee"/> + <path d="M245.16 186.748h-90.336a1 1 0 0 1 0-2h90.336a1 1 0 0 1 0 2z" fill="#eaeaee"/> + <path fill="none" stroke="#eaeaee" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="12 8 3 4 1 9" d="M132.518 192.779h135.95"/> + <path d="M148.458 82.782h29s-9.074-20.277 10.189-22.9c17.18-2.339 23.97 15.315 23.97 15.315s2.037-10.185 12.254-8.237c10.074 1.921 17.511 16.634 17.511 16.634h25.25" fill="none" stroke="#eaeaee" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="12 8 3 4 1 9"/> + <path d="M34.125 60.429H50.25s-5.05-11.276 5.667-12.735c9.554-1.3 13.33 8.517 13.33 8.517s1.133-5.664 6.814-4.58c5.6 1.068 9.738 8.589 9.738 8.589h14.042" fill="none" stroke="#eaeaee" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="12 8 3 4 1 9"/> + <ellipse cx="149.78" cy="243.175" rx="77.947" ry="6.445" fill="#eaeaee"/> + <path d="M221.876 77.056H78.01a10.312 10.312 0 0 0-10.3 10.3v134.026a9.824 9.824 0 0 0 9.95 9.669h144.566a9.824 9.824 0 0 0 9.95-9.669V87.356a10.313 10.313 0 0 0-10.3-10.3z" fill="#fff"/> + <path d="M221.876 81.89H78.01a5.306 5.306 0 0 0-5.3 5.3v134.027a4.821 4.821 0 0 0 4.95 4.669h144.566a4.821 4.821 0 0 0 4.95-4.669V87.19a5.307 5.307 0 0 0-5.3-5.3z" fill="#f9f9fa"/> + <g fill="url(#a)"> + <path d="M76.368 105.543V219c0 2.28.84 3.13 3.12 3.13H220.4c2.28 0 3.12-.85 3.12-3.13V105.543zM185 200.6a3.693 3.693 0 0 1-3.693 3.693h-60.762a3.693 3.693 0 0 1-3.693-3.693v-78.762a3.693 3.693 0 0 1 3.693-3.693h44.971L185 137.421z"/> + <path d="M187.187 193.93h-16.773a2.625 2.625 0 0 1-1.924-.89l-5.326-5.759a2.924 2.924 0 0 1 0-3.894l5.326-5.759a2.625 2.625 0 0 1 1.924-.89h16.773c1.6 0 2.9 1.582 2.9 3.534V190.4c-.001 1.948-1.299 3.53-2.9 3.53z"/> + <path d="M187.187 166.021h-16.773a2.625 2.625 0 0 1-1.924-.89l-5.326-5.759a2.924 2.924 0 0 1 0-3.894l5.326-5.759a2.625 2.625 0 0 1 1.924-.89h16.773c1.6 0 2.9 1.582 2.9 3.534v10.126c-.001 1.949-1.299 3.532-2.9 3.532z"/> + </g> + <g fill="url(#b)"> + <path d="M221.876 81.891a5.307 5.307 0 0 1 5.3 5.3v134.026a4.821 4.821 0 0 1-4.95 4.669H77.66a4.821 4.821 0 0 1-4.95-4.669V87.19a5.306 5.306 0 0 1 5.3-5.3h143.866m0-2H78.01a7.308 7.308 0 0 0-7.3 7.3v134.027a6.822 6.822 0 0 0 6.95 6.669h144.566a6.822 6.822 0 0 0 6.95-6.669V87.19a7.309 7.309 0 0 0-7.3-7.3z"/> + <circle cx="85.771" cy="93.32" r="3.241"/> + <circle cx="96.226" cy="93.32" r="3.241"/> + <path d="M186.093 96.986h-72.3a3.509 3.509 0 0 1-3.509-3.509v-.313a3.509 3.509 0 0 1 3.509-3.509h72.3a3.509 3.509 0 0 1 3.509 3.509v.313a3.509 3.509 0 0 1-3.509 3.509z"/> + <circle cx="203.66" cy="93.32" r="3.241"/> + <circle cx="214.116" cy="93.32" r="3.241"/> + <path d="M157.13 131.141h-31.754a1.351 1.351 0 1 1 0-2.7h31.755a1.351 1.351 0 1 1 0 2.7z"/> + <path d="M153.609 139.09a1.351 1.351 0 0 0-1.351-1.351h-26.882a1.351 1.351 0 0 0 0 2.7h26.882a1.351 1.351 0 0 0 1.351-1.349z"/> + <path d="M164.676 148.39a1.351 1.351 0 0 0-1.351-1.351h-37.949a1.351 1.351 0 0 0 0 2.7h37.949a1.351 1.351 0 0 0 1.351-1.349z"/> + <path d="M159.665 157.69a1.351 1.351 0 0 0-1.351-1.351h-32.938a1.351 1.351 0 0 0 0 2.7h32.938a1.351 1.351 0 0 0 1.351-1.349z"/> + <path d="M153.609 166.99a1.351 1.351 0 0 0-1.351-1.351h-26.882a1.351 1.351 0 1 0 0 2.7h26.882a1.351 1.351 0 0 0 1.351-1.349z"/> + <path d="M164.676 176.29a1.351 1.351 0 0 0-1.351-1.351h-37.949a1.351 1.351 0 1 0 0 2.7h37.949a1.351 1.351 0 0 0 1.351-1.349z"/> + <path d="M159.672 185.59a1.351 1.351 0 0 0-1.351-1.351h-32.945a1.351 1.351 0 1 0 0 2.7h32.944a1.351 1.351 0 0 0 1.352-1.349z"/> + <path d="M164.676 194.89a1.351 1.351 0 0 0-1.351-1.351h-37.949a1.351 1.351 0 1 0 0 2.7h37.949a1.351 1.351 0 0 0 1.351-1.349z"/> + <path d="M165.517 118.145l19.276 19.276h-15.179a4.1 4.1 0 0 1-4.1-4.1v-15.176m0-1a1 1 0 0 0-1 1v15.179a5.1 5.1 0 0 0 5.1 5.1h15.179a1 1 0 0 0 .707-1.707l-19.276-19.276a1 1 0 0 0-.707-.293z"/> + <path d="M187.187 178.737c.367 0 .9.6.9 1.534V190.4c0 .936-.532 1.534-.9 1.534h-16.773a.689.689 0 0 1-.455-.248l-5.326-5.759a.932.932 0 0 1 0-1.178l5.326-5.759a.688.688 0 0 1 .455-.248h16.773m0-2h-16.773a2.625 2.625 0 0 0-1.924.89l-5.326 5.759a2.924 2.924 0 0 0 0 3.894l5.326 5.759a2.626 2.626 0 0 0 1.924.89h16.773c1.6 0 2.9-1.582 2.9-3.534v-10.129c0-1.952-1.3-3.534-2.9-3.534z"/> + <path d="M187.187 150.827c.367 0 .9.6.9 1.534v10.126c0 .936-.532 1.534-.9 1.534h-16.773a.689.689 0 0 1-.455-.248l-5.326-5.759a.932.932 0 0 1 0-1.178l5.326-5.76a.687.687 0 0 1 .455-.248h16.773m0-2h-16.773a2.624 2.624 0 0 0-1.924.89l-5.326 5.759a2.924 2.924 0 0 0 0 3.894l5.326 5.759a2.626 2.626 0 0 0 1.924.89h16.773c1.6 0 2.9-1.582 2.9-3.534v-10.125c0-1.952-1.3-3.534-2.9-3.534z"/> + <path d="M186.408 136l-19.485-19.276a2 2 0 0 0-1.407-.578h-44.971a5.7 5.7 0 0 0-5.693 5.693V200.6a5.7 5.7 0 0 0 5.693 5.693h60.763A5.693 5.693 0 0 0 187 200.6v-8.67h-2v8.67a3.693 3.693 0 0 1-3.693 3.693h-60.762a3.693 3.693 0 0 1-3.693-3.693v-78.762a3.693 3.693 0 0 1 3.693-3.693h44.971L185 137.421v13.406h2v-13.406a2 2 0 0 0-.592-1.421zM185 178.737h2v-14.716h-2z"/> + <path d="M180.308 205.81h-58.763a5.7 5.7 0 0 1-5.693-5.693v4.667a5.7 5.7 0 0 0 5.693 5.693h58.763a5.693 5.693 0 0 0 5.692-5.694v-4.667a5.693 5.693 0 0 1-5.693 5.693z"/> + </g> +</svg> diff --git a/toolkit/themes/shared/illustrations/about-rights.svg b/toolkit/themes/shared/illustrations/about-rights.svg new file mode 100644 index 0000000000..8a25c087c9 --- /dev/null +++ b/toolkit/themes/shared/illustrations/about-rights.svg @@ -0,0 +1,82 @@ +<!-- 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="300" height="300" viewBox="0 0 300 300"> + <defs> + <linearGradient id="a" x1="-300.021" y1="-272.736" x2="547.138" y2="574.423" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#ccfbff"/> + <stop offset="1" stop-color="#c9e4ff"/> + </linearGradient> + <linearGradient id="b" x1="-18.672" y1="23.78" x2="279.805" y2="322.256" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#00c8d7"/> + <stop offset="1" stop-color="#0a84ff"/> + </linearGradient> + </defs> + <path d="M265.342 100.316h-23.336c-2.043-3.774-7.272-12.2-13.831-13.453-8.612-1.642-10.329 6.943-10.329 6.943s-5.724-14.88-20.206-12.906c-16.237 2.211-8.589 19.3-8.589 19.3h-24.443l5.931.115H164.6a1 1 0 0 0 0 2h100.742a1 1 0 0 0 0-2z" fill="#fff"/> + <path d="M111.942 71.45h-13.19c-1.1-2.054-4.033-6.851-7.731-7.556-4.789-.913-5.744 3.861-5.744 3.861s-3.183-8.276-11.236-7.179c-9.03 1.229-4.776 10.735-4.776 10.735H55.671l7.159.139h-6.91a1 1 0 0 0 0 2h56.022a1 1 0 0 0 0-2z" fill="#fff"/> + <path d="M235.972 169.581h-69.687a1 1 0 0 1 0-2h69.687a1 1 0 0 1 0 2z" fill="#eaeaee"/> + <path d="M226.512 163.154h-30.853a.5.5 0 0 1 0-1h30.854a.5.5 0 0 1 0 1z" fill="#eaeaee"/> + <path d="M251.077 175.007h-1a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1zm-5 0h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1zm-21 0h-1a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1zm-5 0h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1zm-21 0h-1a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1zm-5 0h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1z" fill="#eaeaee"/> + <path d="M240.909 210.47H92.625a1 1 0 0 1 0-2h148.284a1 1 0 1 1 0 2z" fill="#eaeaee"/> + <ellipse cx="81.399" cy="227.481" rx="15.603" ry="4.632" fill="#eaeaee"/> + <path d="M68.86 210.47H41.206a1 1 0 0 1 0-2H68.86a1 1 0 0 1 0 2z" fill="#eaeaee"/> + <path d="M95.206 125.267H45.287a1 1 0 0 1 0-2h49.919a1 1 0 0 1 0 2z" fill="#eaeaee"/> + <path d="M86.084 119.993h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1z" fill="#eaeaee"/> + <path d="M165.026 96.856h24.444s-7.649-17.093 8.589-19.3c14.482-1.972 20.205 12.91 20.205 12.91s1.717-8.585 10.329-6.943c8.492 1.619 14.761 14.022 14.761 14.022h21.285" fill="none" stroke="#eaeaee" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="12 8 3 4 1 9"/> + <path d="M56.089 69.222h13.593s-4.253-9.505 4.776-10.735c8.053-1.1 11.236 7.179 11.236 7.179s.955-4.774 5.744-3.861c4.722.9 8.209 7.24 8.209 7.24h11.837" fill="none" stroke="#eaeaee" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="12 8 3 4 1 9"/> + <ellipse cx="149.135" cy="242.903" rx="45.72" ry="9.272" fill="#eaeaee"/> + <path d="M209.9 164.086c3.013-9.515 1.374-19.8-4.615-28.958a45.642 45.642 0 0 0-13.924-13.5 6.243 6.243 0 0 0-4.588-4.872 6.223 6.223 0 0 0-4.553-3.595 6.212 6.212 0 0 0-5.383-3.988 6.522 6.522 0 0 0-.436-.016 6.252 6.252 0 0 0-3.955 1.389 6.211 6.211 0 0 0-.867-.061 6.242 6.242 0 0 0-5.513 3.311q-.946-.037-1.882-.037a45.681 45.681 0 0 0-12.117 1.6c-.062-8.393 1.088-19.17 5.862-29.058a12.031 12.031 0 0 0-10.82-17.255 12.046 12.046 0 0 0-10.836 6.8c-9.762 20.224-9.2 41.788-6.872 56.692a31.125 31.125 0 0 0-3.714 14.724 15.666 15.666 0 0 0-.636 1.638l-.814.521c-1.485.29-2.917.638-4.281 1.039a14.748 14.748 0 0 1-2.456-5.59l-.239-4.606a5.728 5.728 0 0 0-3.769-5.1q-.092-.035-.188-.067a5.749 5.749 0 0 0-1.627-6.85 12.379 12.379 0 0 0-2.9-1.732 15.685 15.685 0 0 0-6.68-1.57 12.767 12.767 0 0 0-4.5.8c-5.209 1.954-8.633 6.666-10.178 14.005-1.818 8.637 2.748 27.443 18.278 40.566 5.772 7.177 17.305 12.187 30.22 13.106 1.437.1 2.885.154 4.307.154a53.486 53.486 0 0 0 13.294-1.619 43.673 43.673 0 0 1-.329 11.819 11.877 11.877 0 0 0 .371 5.606 15.988 15.988 0 0 1-3.391 5.385 6.39 6.39 0 0 0-.307 9.009 6.459 6.459 0 0 0 .909.8 6.359 6.359 0 0 0 6.21 4.88 6.416 6.416 0 0 0 2.374-.452 6.376 6.376 0 0 0 7.382-1.615c3.211-3.7 4.993-8.546 5.964-12.321a12.025 12.025 0 0 0 4.18-7.179 68.453 68.453 0 0 0 .4-19.879 43.989 43.989 0 0 0 11.457-2.63c.49.046.981.068 1.469.068q.652 0 1.3-.054a6.244 6.244 0 0 0 8.974-1.6 6.251 6.251 0 0 0 5.171-8.579l-.383-.937a15.7 15.7 0 0 0 .415-1.681 31.279 31.279 0 0 0 4.216-8.511z" fill="#fff"/> + <g fill="url(#a)"> + <path d="M201.452 136.985a45.33 45.33 0 0 0-52.633-16.478c-8.95 3.593-15.307 10.133-17.9 18.415-5.317 16.983 7.121 36.049 27.725 42.5a46.43 46.43 0 0 0 13.856 2.148c15.476 0 29.041-8.1 33.157-21.25 2.591-8.282 1.098-17.28-4.205-25.335z"/> + <path d="M161.541 205.621a2.514 2.514 0 0 0-.771-.121 2.524 2.524 0 0 0-2.41 1.758 47.907 47.907 0 0 1-2.917 7.05 9.367 9.367 0 0 1-2.409 3.035 2.53 2.53 0 0 0 2.66 4.3 13.056 13.056 0 0 0 4.165-4.868 52.016 52.016 0 0 0 3.318-7.97 2.535 2.535 0 0 0-1.636-3.184z"/> + <path d="M164.2 209.058a2.528 2.528 0 0 0-3.182 1.638 48.521 48.521 0 0 1-2.917 7.05 9.375 9.375 0 0 1-2.412 3.035 2.53 2.53 0 0 0 2.662 4.3 13.063 13.063 0 0 0 4.165-4.866 52.056 52.056 0 0 0 3.319-7.971 2.535 2.535 0 0 0-1.635-3.186z"/> + <path d="M169.179 209.558a2.513 2.513 0 0 0-1.611-1.075 2.542 2.542 0 0 0-.489-.048 2.537 2.537 0 0 0-2.484 2.037 47.923 47.923 0 0 1-2.094 7.336 9.379 9.379 0 0 1-2.048 3.291 2.529 2.529 0 0 0 3.133 3.971 13.016 13.016 0 0 0 3.584-5.312 51.568 51.568 0 0 0 2.389-8.3 2.513 2.513 0 0 0-.38-1.9z"/> + <path d="M190.9 181.291a10.39 10.39 0 0 1-6.11-1.989l-6.7-4.847a10.947 10.947 0 0 1-2.518-15.06 10.448 10.448 0 0 1 14.756-2.57l6.7 4.847a10.947 10.947 0 0 1 2.518 15.06 10.507 10.507 0 0 1-8.646 4.559z"/> + <path d="M185.675 122.091a1 1 0 0 0-1.058-.317l-3.187.962.318-3.422a1 1 0 0 0-1.683-.819l-1.856 1.754-1.17-5.146a1 1 0 0 0-1.909-.137l-1.625 4.225-1.34-2.95a1 1 0 0 0-1.9.29c-.216 1.727-.876 7.053-.985 8.508l-.848 1.462a1 1 0 0 0 .58 1.46l11.626 3.462a1 1 0 0 0 1.174-.5l3.984-7.732a1 1 0 0 0-.121-1.1z"/> + <path d="M135.176 158.7l-2.414-6.577a1.5 1.5 0 0 0-2.216-.745l-4.127 2.642a1.5 1.5 0 0 0 .3 2.673l2.768 1-1.276 1.617a1.5 1.5 0 0 0 1.178 2.429 1.455 1.455 0 0 0 .341-.039l4.381-1.025a1.5 1.5 0 0 0 1.068-1.978z"/> + <path d="M200.937 176.924l-1.854-4.537a1.491 1.491 0 0 0-.96-.868 1.511 1.511 0 0 0-1.282.2l-5.761 3.989a1.5 1.5 0 0 0-.267 2.231l2.995 3.361a1.5 1.5 0 0 0 1.12.5 1.5 1.5 0 0 0 1.5-1.583l-.113-2.056 2.84.771a1.5 1.5 0 0 0 1.785-2.014z"/> + <path d="M159.611 159.487c-5.6-3.72-13.21-6.09-21.425-6.675a54.688 54.688 0 0 0-3.871-.138c-15.618 0-27.884 6.871-28.532 15.982-.351 4.933 2.636 9.762 8.411 13.6 5.6 3.72 13.21 6.09 21.425 6.675 1.291.092 2.594.138 3.873.138 15.617 0 27.883-6.871 28.532-15.982.349-4.936-2.638-9.765-8.413-13.6z"/> + <path d="M124.666 177.47a4.742 4.742 0 0 0-2.313-2.828c-18.9-10.14-22.139-28.077-21.316-31.987.505-2.4 1.184-2.936 1.32-3.021a.589.589 0 0 0 .175-.055 1.012 1.012 0 0 0 .424-.317c.641-.579 2-2.067 5.575-5.963a1.009 1.009 0 0 0-.136-1.488 12.481 12.481 0 0 0-6.611-2.174 8.2 8.2 0 0 0-2.887.51c-3.59 1.346-6.013 4.893-7.2 10.542-1.374 6.526 2.394 29.625 26.144 42.367a4.774 4.774 0 0 0 6.827-5.585z"/> + <path d="M155.655 145.652a7.9 7.9 0 0 0-6.32-3.121 7.941 7.941 0 0 0-4.518 1.4 7.444 7.444 0 0 0-3.174 4.94 7.292 7.292 0 0 0 1.363 5.588c.189.255 18.886 25.834 14.472 50.251a7.288 7.288 0 0 0 1.232 5.528 7.762 7.762 0 0 0 5.12 3.188 8.12 8.12 0 0 0 1.335.111 7.706 7.706 0 0 0 7.671-6.235c5.564-30.792-16.25-60.402-17.181-61.65z"/> + <path d="M122.878 156.521q-.132 0-.265.007c-.21.014-.4.021-.589.021-7.346 0-9.405-10.133-9.584-11.093l-.261-4.963a1.009 1.009 0 0 0-1.74-.642l-6.672 7.018a1.009 1.009 0 0 0-.264.863c1.427 8.49 7.125 18.4 18.49 18.4.4 0 .809-.013 1.22-.039a4.8 4.8 0 0 0 3.327-1.629 4.744 4.744 0 0 0 1.183-3.461 4.837 4.837 0 0 0-4.845-4.482z"/> + <path d="M154.67 78.331a7.593 7.593 0 0 0-4.039-4.394 7.972 7.972 0 0 0-10.422 3.537c-15.809 31.64-3.755 67.22-3.234 68.719a7.8 7.8 0 0 0 7.418 5.159 8.1 8.1 0 0 0 2.466-.387 7.688 7.688 0 0 0 4.584-3.892 7.291 7.291 0 0 0 .372-5.691c-.106-.308-10.519-31.3 2.489-57.333a7.288 7.288 0 0 0 .366-5.718z"/> + </g> + <g fill="#f9f9fa"> + <path d="M144.51 178c-8.129-4.344-13.41-12.143-13.455-19.869a1 1 0 0 0-1.107-.988c-10.364 1.124-17.6 6.019-17.6 11.905 0 6.8 9.618 12.135 21.9 12.135a37.451 37.451 0 0 0 10.069-1.34 1 1 0 0 0 .2-1.844z"/> + <path d="M178.859 150.443l.9-1.739a1 1 0 0 0-1.178-1.415l-4.394 1.327.438-4.705a1 1 0 0 0-1.683-.82l-2.677 2.529-1.578-6.942a1 1 0 0 0-.9-.776 1.011 1.011 0 0 0-1 .639l-2.274 5.915-1.949-4.292a1 1 0 0 0-1.9.29 964.54 964.54 0 0 0-.505 4.108c-11.4-4.874-19.225-9.7-21.771-1.659-.125.395-.235.8-.337 1.215a9.531 9.531 0 0 1 1.743-.172l7.761-.024h.03a9.492 9.492 0 0 1 5.762 17.04c-4.371-1.722-7.326-2.554-8.124-.037a6.264 6.264 0 0 0-.276 2l-2.441.008a24.511 24.511 0 0 1-1.91-2.542.5.5 0 0 0-.851.525 28.4 28.4 0 0 0 5.095 5.823q.628.63 1.318 1.241c.624.607 1.3 1.221 2.028 1.827 2.317 2.521 6.1 4.97 11.886 6.8 6.258 1.982 10.941 2.077 14.3 1.2a27.867 27.867 0 0 0 7.433-1.248 13.317 13.317 0 0 0 2.518-.96c.122-.06.209-.1.264-.124a.5.5 0 0 0-.316-.948 3.916 3.916 0 0 0-.386.173 12.409 12.409 0 0 1-2.354.9l-2.384-1.689a6.64 6.64 0 0 0 1.011-1.926c.769-2.428-1.889-3.463-6.173-4.527a10 10 0 0 1 15.415-10.781l6.333 4.487a10.027 10.027 0 0 1 1.221 1.035c.079-.224.168-.448.239-.671 2.515-7.943-6.418-8.584-18.334-11.085z"/> + </g> + <g fill="url(#b)"> + <path d="M147.105 74.29a6.777 6.777 0 0 1 6.093 9.723c-6.372 13.2-7 27.638-6.034 38.767a35.29 35.29 0 0 1 2.353-1.046 39.658 39.658 0 0 1 14.664-2.727 44.406 44.406 0 0 1 6.055.419c.142-1.165.272-2.213.347-2.817a1 1 0 0 1 1.9-.29l1.34 2.95 1.625-4.225a1 1 0 0 1 .94-.641h.065a1 1 0 0 1 .9.776l1.17 5.146 1.856-1.754a1 1 0 0 1 1.683.819l-.295 3.169c.113.047.223.1.335.144l2.828-.854a.991.991 0 0 1 .288-.043 1 1 0 0 1 .89 1.458l-.553 1.073A40.9 40.9 0 0 1 200.89 138c5.11 7.816 6.531 16.517 4 24.5a26.118 26.118 0 0 1-4.221 8.054 10.53 10.53 0 0 1-1.05 3.772l1.17 2.864a1 1 0 0 1-.926 1.379.966.966 0 0 1-.261-.036l-2.713-.736c-.244.2-.495.394-.755.571l.108 1.959a1 1 0 0 1-1.745.72l-1.178-1.322a10.589 10.589 0 0 1-5.228.258 39.5 39.5 0 0 1-15.265 2.981q-.832 0-1.668-.033a65.709 65.709 0 0 1 .545 24.057 6.753 6.753 0 0 1-3.656 4.88c-.621 3.04-2.1 8.412-5.255 12.047a1.128 1.128 0 1 1-1.7-1.479c2.39-2.752 3.742-6.752 4.482-9.855a6.238 6.238 0 0 1-.544.024 6.756 6.756 0 0 1-.834-.053c-.958 3.015-2.981 8.111-6.453 11.36a1.116 1.116 0 0 1-.766.291 1.135 1.135 0 0 1-.83-.346 1.128 1.128 0 0 1 .055-1.592c3.065-2.867 4.928-7.565 5.827-10.372a6.769 6.769 0 0 1-1.105-.681 25.01 25.01 0 0 1-5.63 9.032 1.128 1.128 0 0 1-1.542-1.647c2.683-2.509 4.445-6.409 5.471-9.322a6.73 6.73 0 0 1-.864-4.6 52.712 52.712 0 0 0-.623-19.714 43.539 43.539 0 0 1-17.515 3.365c-1.3 0-2.611-.047-3.934-.14-11.783-.838-22.043-5.258-26.8-11.541-14.73-12.177-18.3-29.328-16.935-35.812 1.151-5.468 3.467-8.889 6.883-10.17a7.522 7.522 0 0 1 2.655-.471 11.751 11.751 0 0 1 6.272 2.129.5.5 0 0 1 .067.737c-4.039 4.409-5.322 5.786-5.815 6.224a.486.486 0 0 1-.047.058 10.287 10.287 0 0 0-1.689 3.318c-.794 2.193.414 11.566 7.831 21.016a14.5 14.5 0 0 1 2.117-2.5c-3.636-3.525-5.712-9.427-6.395-13.521a.5.5 0 0 1 .129-.424l6.588-7.006a.5.5 0 0 1 .364-.159.485.485 0 0 1 .172.032.5.5 0 0 1 .327.443l.26 5c.054.286 1.512 8.332 6.76 10.759a40.21 40.21 0 0 1 7.643-1.982.993.993 0 0 1 .382-.47l2.582-1.653a10.523 10.523 0 0 1 1.317-3.71 25.958 25.958 0 0 1 3.924-14.945c-2.288-13.3-3.642-35.193 6.117-55.411a6.8 6.8 0 0 1 6.107-3.833m0-2a8.8 8.8 0 0 0-7.909 4.964c-9.6 19.9-8.838 41.235-6.411 55.882a27.923 27.923 0 0 0-3.845 14.857 12.418 12.418 0 0 0-1.1 2.974l-1.862 1.192a2.936 2.936 0 0 0-.409.315 42.5 42.5 0 0 0-6.374 1.636c-3.467-2.2-4.749-7.91-4.933-8.818l-.252-4.861a2.491 2.491 0 0 0-1.638-2.218 2.44 2.44 0 0 0-.859-.153 2.509 2.509 0 0 0-1.821.789l-6.588 7.005a2.475 2.475 0 0 0-.273.348 8.137 8.137 0 0 1-.072-2.866 9.7 9.7 0 0 1 1.295-2.661l.011-.012c.6-.561 1.842-1.893 5.839-6.256a2.5 2.5 0 0 0-.347-3.691 13.627 13.627 0 0 0-7.468-2.525 9.532 9.532 0 0 0-3.357.6c-4.1 1.537-6.837 5.451-8.138 11.631-1.445 6.865 2.2 24.905 17.441 37.62 5.151 6.627 15.889 11.271 28.107 12.14a55.8 55.8 0 0 0 4.076.145 47.332 47.332 0 0 0 16-2.6 49.245 49.245 0 0 1 .167 16.607 8.721 8.721 0 0 0 .655 5.085 21.128 21.128 0 0 1-4.657 7.723 3.112 3.112 0 0 0 1.519 5.338 3.166 3.166 0 0 0-.058.511 3.137 3.137 0 0 0 5.264 2.385q.167-.157.331-.318a3.13 3.13 0 0 0 4.854.185c3.18-3.667 4.781-8.834 5.522-12.08a8.779 8.779 0 0 0 3.859-5.826 66.713 66.713 0 0 0-.114-22.372 41.259 41.259 0 0 0 14.755-2.906 12.588 12.588 0 0 0 4.315-.094l.373.419a3 3 0 0 0 5.236-2.142l.839.228a2.93 2.93 0 0 0 .785.106 3 3 0 0 0 2.778-4.134l-.849-2.077a12.43 12.43 0 0 0 .805-3.043 28.07 28.07 0 0 0 4.2-8.213c2.712-8.567 1.208-17.871-4.237-26.2a42.593 42.593 0 0 0-14.413-13.424 3 3 0 0 0-3.8-3.544l-.337.1.043-.463a3 3 0 0 0-4.324-2.965l-.426-1.875a2.984 2.984 0 0 0-2.709-2.327 3.298 3.298 0 0 0-.208-.007 2.986 2.986 0 0 0-2.809 1.921l-.052.135a3 3 0 0 0-4.934 1.9l-.106.851a45.995 45.995 0 0 0-4.312-.2 41.52 41.52 0 0 0-15.224 2.8c-.551-9.739.237-22.9 6.043-34.923a8.781 8.781 0 0 0-7.894-12.592z"/> + <path d="M201.082 171.875h-.028a.5.5 0 0 1-.472-.526 13.519 13.519 0 0 0-1.958-7 .5.5 0 1 1 .841-.541 14.3 14.3 0 0 1 2.116 7.6.5.5 0 0 1-.499.467z"/> + <path d="M130.643 148.528a.5.5 0 0 1-.406-.791c1.734-2.425 5.456-3.655 5.613-3.706a.5.5 0 0 1 .309.951c-.036.012-3.568 1.182-5.109 3.337a.5.5 0 0 1-.407.209z"/> + <path d="M184.377 126.738a.5.5 0 0 1-.372-.834c.572-.639 2.077-2.676 1.5-3.632-.484-.8-2.621.081-3.58.636a.5.5 0 0 1-.742-.528c.257-1.324.354-3.466-.258-3.857a.264.264 0 0 0-.235-.03c-.555.153-1.336 1.295-1.714 2.058a.5.5 0 0 1-.942-.151c-.392-2.705-1.323-5.791-2.031-5.892-.021 0-.076-.012-.177.065-.738.565-1.315 3.218-1.5 4.757a.5.5 0 0 1-.431.435.515.515 0 0 1-.529-.309c-.7-1.729-1.931-3.588-2.5-3.544-.009 0-.046.028-.093.107-.611 1.019-.2 4.857.018 5.394a.512.512 0 0 1-.252.655.486.486 0 0 1-.647-.219c-.278-.557-.808-4.824-.012-6.282a1.129 1.129 0 0 1 .879-.649c1.124-.127 2.166 1.38 2.848 2.674.28-1.367.793-3.18 1.62-3.812a1.223 1.223 0 0 1 .927-.262c1.425.2 2.259 3.345 2.654 5.4a3.488 3.488 0 0 1 1.625-1.392 1.247 1.247 0 0 1 1.042.152c1.032.661.993 2.647.849 3.909 1.2-.539 3.233-1.185 4.047.167 1.06 1.757-1.336 4.508-1.613 4.815a.5.5 0 0 1-.381.169z"/> + <path d="M130.109 161.852a3.206 3.206 0 0 1-1.385-.28 1.435 1.435 0 0 1-.863-1.084 3.969 3.969 0 0 1 1.2-2.733c-1.424-.448-3.732-1.375-3.751-2.663-.022-1.481 3.985-3.6 5.71-4.441a.5.5 0 1 1 .438.9c-2.727 1.332-5.133 2.98-5.148 3.528.008.539 2.012 1.47 3.8 1.94a.5.5 0 0 1 .221.842c-.674.656-1.578 1.856-1.477 2.468.016.1.066.228.308.343 1.108.53 3.093-.221 3.765-.554a.5.5 0 0 1 .447.895 8.44 8.44 0 0 1-3.265.839z"/> + <path d="M195.266 182.317c-1.464 0-3.507-2.879-4.366-4.2a.5.5 0 1 1 .838-.545c1.5 2.3 3.13 3.9 3.528 3.745.514-.2.617-1.951.387-3.4a.5.5 0 0 1 .667-.547c1.947.723 3.724.963 3.957.693.2-.487-.784-3.2-2.154-5.923a.5.5 0 0 1 .894-.449c.845 1.678 2.744 5.7 2.142 6.842-.57 1.077-2.9.534-4.423.04.1 1.208.075 3.222-1.111 3.679a1 1 0 0 1-.359.065z"/> + <path d="M153.084 218.985a.5.5 0 0 1-.342-.865c4.939-4.621 6.88-13.587 6.9-13.677a.5.5 0 1 1 .979.207c-.081.38-2.027 9.366-7.194 14.2a.5.5 0 0 1-.343.135z"/> + <path d="M155.771 221.9a.5.5 0 0 1-.342-.865c4.935-4.616 6.88-13.588 6.9-13.678a.5.5 0 0 1 .979.207c-.081.38-2.027 9.367-7.194 14.2a.5.5 0 0 1-.343.136z"/> + <path d="M160.647 222.024a.5.5 0 0 1-.377-.828c4.433-5.107 5.434-14.227 5.443-14.317a.487.487 0 0 1 .549-.445.5.5 0 0 1 .445.549c-.04.387-1.044 9.526-5.683 14.87a.5.5 0 0 1-.377.171z"/> + <path d="M110.254 161.469a.5.5 0 0 1-.369-.837 23.915 23.915 0 0 1 9.942-5.786.5.5 0 1 1 .3.953 23.391 23.391 0 0 0-9.507 5.508.5.5 0 0 1-.366.162z"/> + <path d="M107.264 169.781a.5.5 0 0 1-.472-.335c-.049-.139-1.155-3.438 1.8-7.218a.5.5 0 0 1 .787.617c-2.624 3.353-1.657 6.241-1.647 6.271a.5.5 0 0 1-.307.637.489.489 0 0 1-.161.028z"/> + <path d="M155.876 186.7a.5.5 0 0 1-.2-.96 22.264 22.264 0 0 0 3.824-2.14.5.5 0 1 1 .588.809 22.934 22.934 0 0 1-4.018 2.251.5.5 0 0 1-.194.04z"/> + <path d="M143.722 96.658a.494.494 0 0 1-.223-.053.5.5 0 0 1-.224-.671c2.965-5.928 1.7-14.842 1.683-14.931a.5.5 0 0 1 .989-.146c.056.378 1.329 9.313-1.778 15.524a.5.5 0 0 1-.447.277z"/> + <path d="M147.293 99.246a.494.494 0 0 1-.223-.053.5.5 0 0 1-.224-.671c2.965-5.928 1.7-14.841 1.684-14.93a.5.5 0 0 1 .989-.146c.056.378 1.329 9.312-1.778 15.523a.5.5 0 0 1-.448.277z"/> + <path d="M151.985 97.6a.487.487 0 0 1-.176-.032.5.5 0 0 1-.292-.644c2.334-6.2.148-14.938.126-15.025a.5.5 0 1 1 .969-.248c.095.369 2.287 9.124-.159 15.625a.5.5 0 0 1-.468.324z"/> + <path d="M188.641 167.773a1 1 0 0 1-.962-.729 3.532 3.532 0 0 0-2.26-2.218 3.574 3.574 0 0 0-3.12.508 1 1 0 1 1-1.271-1.543 5.5 5.5 0 0 1 8.578 2.717 1 1 0 0 1-.965 1.265z"/> + <path d="M149.323 155.323a1 1 0 0 1-.962-.729 3.532 3.532 0 0 0-2.26-2.218 3.575 3.575 0 0 0-3.12.508 1 1 0 1 1-1.271-1.543 5.5 5.5 0 0 1 8.578 2.717 1 1 0 0 1-.965 1.265z"/> + <path d="M169.2 174.119c-12.839 0-21.089-9.653-21.187-9.771a1 1 0 0 1 1.534-1.284c.108.13 11.038 12.862 27.056 7.905a1 1 0 1 1 .592 1.91 26.9 26.9 0 0 1-7.995 1.24z"/> + <path d="M148.308 88.455a5.777 5.777 0 0 1-1.881-.312c-4.221-1.443-5.695-7.407-5.756-7.66a1 1 0 0 1 1.945-.468c.013.052 1.282 5.153 4.462 6.237 1.662.566 3.658-.077 5.939-1.908a1 1 0 0 1 1.252 1.561 9.8 9.8 0 0 1-5.961 2.55z"/> + <path d="M143.018 98.25a.987.987 0 0 1-.416-.092 1 1 0 0 1-.493-1.325 29.886 29.886 0 0 0 2.285-9.877 1.016 1.016 0 0 1 1.044-.956 1 1 0 0 1 .955 1.043 31.384 31.384 0 0 1-2.465 10.624 1 1 0 0 1-.91.583z"/> + <path d="M146.893 100.375a1 1 0 0 1-.893-1.457c.031-.062 1.778-3.614 2.015-11.323a.987.987 0 0 1 1.03-.97 1 1 0 0 1 .969 1.03c-.254 8.258-2.155 12.022-2.236 12.179a1 1 0 0 1-.885.541z"/> + <path d="M151.643 99.5a1 1 0 0 1-.889-1.455 22.246 22.246 0 0 0 1.522-11.677 1 1 0 0 1 1.986-.236 23.772 23.772 0 0 1-1.729 12.824 1 1 0 0 1-.89.544z"/> + <path d="M175.977 184c-16.543 0-27.147-5.563-33.13-10.23-6.5-5.074-9.045-10.086-9.15-10.3a.5.5 0 0 1 .9-.446c.1.2 10.341 19.974 41.386 19.974a.5.5 0 0 1 0 1z"/> + <path d="M136.393 131.5a.5.5 0 0 1-.424-.764c.178-.285 4.463-7.025 14.763-10.543a.5.5 0 0 1 .323.947c-9.966 3.4-14.2 10.057-14.237 10.123a.5.5 0 0 1-.425.237z"/> + <path d="M146.4 151.423a1.358 1.358 0 0 1 .884 1.7l-.918 2.9a1.358 1.358 0 0 1-1.7.884 1.358 1.358 0 0 1-.884-1.7l.918-2.9a1.351 1.351 0 0 1 1.7-.884z"/> + <path d="M185.721 163.873a1.358 1.358 0 0 1 .884 1.7l-.918 2.9a1.358 1.358 0 0 1-1.7.884 1.358 1.358 0 0 1-.884-1.7l.918-2.9a1.355 1.355 0 0 1 1.7-.884z"/> + <path d="M171.819 164.988c-2.257-2.156-9.975-5.389-15.3-3.991a2.079 2.079 0 0 0-1.469 2.1c-.055 2.165 2 5.019 6.72 6.512a18.025 18.025 0 0 0 5.313.982 6.476 6.476 0 0 0 3.311-.779 4.566 4.566 0 0 0 2.166-3.1 1.965 1.965 0 0 0-.741-1.724z"/> + <path d="M121.965 96.833a1 1 0 0 1-1-1v-12.55a1 1 0 0 1 .421-.815L167.6 49.634a1 1 0 0 1 1.158 1.631L122.965 83.8v12.033a1 1 0 0 1-1 1z"/> + <path d="M116.318 124.646a1 1 0 0 1-.562-.174l-9.2-6.273a1 1 0 0 1-.437-.826v-15.058a1 1 0 1 1 2 0v14.529l8.765 5.976a1 1 0 0 1-.564 1.826z"/> + <path d="M80.489 227.782a2.5 2.5 0 0 1-2.5-2.5v-74.444a2.5 2.5 0 0 1 5 0v74.444a2.5 2.5 0 0 1-2.5 2.5z"/> + <path d="M80.492 161.79a2.5 2.5 0 0 0 3.477 3.594l10.508-10.168a42.319 42.319 0 0 1-1.528-5.479zm29.467-25.034a2.5 2.5 0 0 0-3.535-.059l-5.171 5c-.121.289-.245.6-.374.954-.332.917-.3 3.1.371 6.007l8.65-8.37a2.5 2.5 0 0 0 .059-3.532z"/> + <path d="M141.381 80.325c-18.7 13.4-25.152 18.462-25.416 18.99-.478.955-.552 2.013-.412 13.112.062 4.906.154 12.212-.093 13.978-1.161 1.589-7.3 8.162-12.858 13.906a2.5 2.5 0 1 0 3.593 3.477c4.786-4.944 12.946-13.5 13.824-15.258.605-1.211.69-3.779.534-16.166-.051-4.016-.112-8.893-.007-10.7 1.871-1.531 15.38-11.247 23.162-16.83.027-.094.058-.2.089-.3-.3-.4-.621-.848-.964-1.366a17.248 17.248 0 0 1-1.452-2.843zm24.034-13.956a2.5 2.5 0 0 0-3.483-.6c-4.667 3.287-8.85 6.24-12.611 8.9a6.883 6.883 0 0 1 .722.3 6.719 6.719 0 0 1 3.129 3.111c4.122-2.923 8.12-5.747 11.639-8.226a2.5 2.5 0 0 0 .605-3.485z"/> + </g> +</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 0000000000..93a3199c8e --- /dev/null +++ b/toolkit/themes/shared/in-content/common.inc.css @@ -0,0 +1,1178 @@ +%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: #0c0c0d; + --in-content-page-background: #f9f9fa; + --in-content-text-color: var(--grey-90); + --in-content-deemphasized-text: var(--grey-60); + --in-content-selected-text: #fff; + --in-content-box-background: #fff; + --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */ + --in-content-box-background-hover: #ededf0; /* grey 20 */ + --in-content-box-background-active: #d7d7db; /* grey 30 */ + --in-content-box-border-color: var(--grey-90-a30); + --in-content-box-info-background: var(--grey-20); + --in-content-item-hover: rgba(69, 161, 255, 0.2); /* blue 40 a20 */ + --in-content-item-selected: #0a84ff; + --in-content-border-highlight: #0a84ff; + --in-content-border-focus: #0a84ff; + --in-content-border-hover: var(--grey-90-a50); + --in-content-border-active: var(--blue-50); + --in-content-border-active-shadow: var(--blue-50-a30); + --in-content-border-invalid: var(--red-50); + --in-content-border-invalid-shadow: var(--red-50-a30); + --in-content-border-color: #d7d7db; + --in-content-category-outline-focus: 1px dotted #0a84ff; + --in-content-category-text-selected: #0a84ff; + --in-content-category-text-selected-active: #0060df; + --in-content-category-background-hover: rgba(12,12,13,0.1); + --in-content-category-background-active: rgba(12,12,13,0.15); + --in-content-category-background-selected-hover: rgba(12,12,13,0.15); + --in-content-category-background-selected-active: rgba(12,12,13,0.2); + --in-content-tab-color: #424f5a; + --in-content-link-color: var(--blue-60); + --in-content-link-color-hover: var(--blue-70); + --in-content-link-color-active: var(--blue-80); + --in-content-link-color-visited: var(--blue-60); + --in-content-button-background: var(--grey-90-a10); + --in-content-button-background-hover: var(--grey-90-a20); + --in-content-button-background-active: var(--grey-90-a30); + --in-content-primary-button-background: var(--blue-60); + --in-content-primary-button-background-hover: var(--blue-70); + --in-content-primary-button-background-active: var(--blue-80); + --in-content-table-background: #ebebeb; + --in-content-table-border-dark-color: #d1d1d1; + --in-content-table-header-background: #0a84ff; + --in-content-dialog-header-background: #f1f1f1; + --in-content-sidebar-width: 240px; + + --dialog-warning-text-color: var(--red-60); + + --panel-border-radius: 2px; /* This is overridden on Windows */ + + --blue-40: #45a1ff; + --blue-40-a10: rgb(69, 161, 255, 0.1); + --blue-50: #0a84ff; + --blue-50-a30: rgba(10, 132, 255, 0.3); + --blue-60: #0060df; + --blue-70: #003eaa; + --blue-80: #002275; + --grey-20: #ededf0; + --grey-30: #d7d7db; + --grey-40: #b1b1b3; + --grey-60: #4a4a4f; + --grey-90: #0c0c0d; + --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-a50: rgba(12, 12, 13, 0.5); + --grey-90-a60: rgba(12, 12, 13, 0.6); + --green-50: #30e60b; + --green-60: #12bc00; + --green-70: #058b00; + --green-80: #006504; + --green-90: #003706; + --orange-50: #ff9400; + --red-40: #ff4f5e; + --red-50: #ff0039; + --red-50-a30: rgba(255, 0, 57, 0.3); + --red-60: #d70022; + --red-70: #a4000f; + --red-80: #5a0002; + --red-90: #3e0200; + --yellow-50: #ffe900; + --yellow-60: #d7b600; + --yellow-60-a30: rgba(215, 182, 0, 0.3); + --yellow-70: #a47f00; + --yellow-80: #715100; + --yellow-90: #3e2800; + + --shadow-10: 0 1px 4px var(--grey-90-a10); + --shadow-30: 0 4px 16px var(--grey-90-a10); + + --card-padding: 16px; + --card-shadow: var(--shadow-10); + --card-outline-color: var(--grey-30); + --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); +} + +@media (prefers-color-scheme: dark) { + :root { + /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */ + --in-content-page-background: #2A2A2E; + --in-content-page-color: rgb(249, 249, 250); + + --in-content-text-color: var(--in-content-page-color); + --in-content-deemphasized-text: var(--grey-40); + --in-content-box-background: #202023; + --in-content-box-background-hover: rgba(249,249,250,0.15); + --in-content-box-background-active: rgba(249,249,250,0.2); + --in-content-box-background-odd: rgba(249,249,250,0.05); + --in-content-box-info-background: rgba(249,249,250,0.15); + + --in-content-border-color: rgba(249,249,250,0.2); + --in-content-border-hover: rgba(249,249,250,0.3); + --in-content-box-border-color: rgba(249,249,250,0.2); + + --in-content-button-background: rgba(249,249,250,0.1); + --in-content-button-background-hover: rgba(249,249,250,0.15); + --in-content-button-background-active: rgba(249,249,250,0.2); + + --in-content-category-background-hover: rgba(249,249,250,0.1); + --in-content-category-background-active: rgba(249,249,250,0.15); + --in-content-category-background-selected-hover: rgba(249,249,250,0.15); + --in-content-category-background-selected-active: rgba(249,249,250,0.2); + + --in-content-table-background: #202023; + --in-content-table-border-dark-color: rgba(249,249,250,0.2); + --in-content-table-header-background: #002b57; + --in-content-dialog-header-background: rgba(249,249,250,0.05); + + --in-content-category-text-selected: var(--blue-40); + --in-content-category-text-selected-active: var(--blue-50); + --in-content-link-color: var(--blue-40); + --in-content-link-color-hover: var(--blue-50); + --in-content-link-color-active: var(--blue-60); + --in-content-link-color-visited: var(--blue-40); + + --in-content-tab-color: var(--in-content-page-color); + + --card-outline-color: var(--grey-60); + + --dialog-warning-text-color: var(--red-40); + + scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); + } +} + +:root { + font: message-box; + 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); +} + +html|h2 { + font-weight: 600; + line-height: 1.4em; +} + +.main-content { + padding: 40px 28px; + overflow: auto; +} + +/* tabpanels and tabs */ + +xul|tabpanels { + appearance: none; + border: none; + padding: 0; + background-color: transparent; + color: inherit; +} + +xul|tabs { + margin-bottom: 15px; + border-block: 1px solid var(--in-content-box-border-color); + background-color: var(--in-content-page-background); + color: var(--in-content-tab-color); +} + +xul|tab { + appearance: none; + margin-top: 0; + padding: 4px 20px 0 !important; + min-height: 44px; + color: inherit; + background-color: var(--in-content-page-background); + border-bottom: 4px solid transparent; + 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); + border-bottom-color: var(--in-content-border-highlight); +} + +/* html buttons */ + +html|button { + padding: 3px; + font: inherit; +} + +/* xul buttons and menulists */ + +button, +html|select, +html|input[type="color"], +xul|menulist { + appearance: none; + min-height: 32px; + /* !important overrides button.css for disabled and default XUL buttons: */ + color: inherit !important; + border: 1px solid transparent; /* needed for high-contrast mode, where it'll show up */ + border-radius: 2px; + background-color: var(--in-content-button-background); + font-weight: 400; + padding: 0 8px; + text-decoration: none; + margin: 4px 8px; + /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */ + font-size: 1em; +} + +xul|button, +html|button { + /* Use the same margin of other elements for the alignment */ + margin-inline: 4px; +} + +::-moz-focus-inner { + border: none; +} + +button:-moz-focusring, +html|select:-moz-focusring, +html|input:is([type="checkbox"], [type="color"]):-moz-focusring, +xul|menulist:-moz-focusring { + outline: 2px solid var(--in-content-border-active); + /* offset outline to align with 1px border-width set for buttons/menulists above. */ + outline-offset: -1px; + /* Make outline-radius slightly bigger than the border-radius set above, + * to make the thicker outline corners look smooth */ + -moz-outline-radius: 3px; + box-shadow: 0 0 0 4px var(--in-content-border-active-shadow); +} + +html|select:not([size], [multiple]) { + background-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg"); + background-position: right 3px center; + background-repeat: no-repeat; + background-size: auto 12px; + -moz-context-properties: fill; + fill: currentColor; + font-size: inherit; + line-height: 2.1; + padding-inline: 5px 24px; + text-overflow: ellipsis; +} + +html|select:not([size], [multiple]):dir(rtl) { + background-position-x: left 3px; +} + +html|select:not([size], [multiple]) > html|option { + background-color: var(--in-content-box-background); + color: var(--in-content-text-color); +} + +html|button:enabled:hover, +html|select:not([size], [multiple]):enabled:hover, +html|input[type="color"]:hover, +xul|button:not([disabled="true"]):hover, +xul|menulist:not([disabled="true"]):hover { + background-color: var(--in-content-button-background-hover); +} + +html|button:enabled:hover:active, +html|select:not([size], [multiple]):enabled:hover:active, +html|input[type="color"]:enabled:hover:active, +xul|button:not([disabled="true"]):hover:active, +xul|button[open], +xul|button[open]:hover, +xul|menulist[open="true"]:not([disabled="true"]) { + background-color: var(--in-content-button-background-active); +} + +html|button:disabled, +html|select:disabled, +html|input[type="color"]:disabled, +xul|button[disabled="true"], +xul|menulist[disabled="true"] { + opacity: 0.4; +} + +html|button[autofocus], +html|button[type="submit"], +xul|button[default], +button.primary { + background-color: var(--in-content-primary-button-background); + color: var(--in-content-selected-text) !important; +} + +html|button[autofocus]:enabled:hover, +html|button[type="submit"]:enabled:hover, +html|button.primary:enabled:hover, +xul|button[default]:not([disabled="true"]):hover, +xul|button.primary:not([disabled="true"]):hover { + background-color: var(--in-content-primary-button-background-hover); +} + +html|button[autofocus]:enabled:hover:active, +html|button[type="submit"]:enabled:hover:active, +html|button.primary:enabled:hover:active, +xul|button[default]:not([disabled="true"]):hover:active, +xul|button.primary:not([disabled="true"]):hover:active { + background-color: var(--in-content-primary-button-background-active); +} + +html|button.danger-button { + background-color: var(--red-60); + color: white !important; +} + +html|button.danger-button:enabled:hover { + background-color: var(--red-70); +} + +html|button.danger-button:enabled:hover:active { + background-color: var(--red-80); +} + +html|button.ghost-button { + background-color: transparent; +} + +html|button.ghost-button:enabled:hover { + background-color: var(--in-content-button-background); +} + +html|button.ghost-button:enabled:hover:active { + background-color: var(--in-content-button-background-hover); +} + +html|input[type="color"] { + padding: 6px; + width: 50px; +} + +xul|menulist[image]::part(icon) { + margin-inline-end: 5px; +} + +xul|*.close-icon > xul|*.button-box { + padding-block: 0; + padding-inline: 0 !important; +} + +xul|menulist::part(dropmarker) { + appearance: none; + margin-inline-end: 4px; + padding: 0; + border: none; + background-color: transparent; + list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +xul|menulist::part(dropmarker-icon) { + width: 12px; + height: 12px; +} + +xul|menulist > xul|menupopup { + 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 { + appearance: none; + font-size: 1em; + color: var(--in-content-text-color); + padding-block: 0.2em; + padding-inline: 10px 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"] { + 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"] { + 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"] { + color: #999; + /* override the [_moz-menuactive="true"] background color from + global/menu.css */ + background-color: transparent; +} + +xul|menulist > xul|menupopup xul|menuseparator { + appearance: none; + margin: 0; + padding: 0; + border-top: 1px solid var(--in-content-box-border-color); + border-bottom: none; +} + +/* textboxes */ + +html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), +html|textarea, +xul|search-textbox { + appearance: none; + border: 1px solid var(--in-content-box-border-color); + border-radius: 2px; + color: inherit; + background-color: var(--in-content-box-background); +} + +xul|search-textbox { + min-height: 32px; + padding-inline: 8px; +} + +html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), +html|textarea { + font-family: inherit; + font-size: inherit; + padding: 5px 8px; + margin: 2px 4px; +} + +html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):enabled:not(:focus):hover, +html|textarea:enabled:not(:focus):hover, +xul|search-textbox:not([disabled="true"], [focused]):hover { + border-color: var(--in-content-border-hover); +} + +html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus, +html|textarea:focus, +xul|search-textbox[focused] { + border-color: var(--in-content-border-active); + box-shadow: 0 0 0 1px var(--in-content-border-active), + 0 0 0 4px var(--in-content-border-active-shadow); + outline: none; +} + +html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid, +html|textarea:-moz-ui-invalid { + border-color: var(--in-content-border-invalid); +} + +/* Don't show the field error outlines and focus borders at the same time. */ +html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid:focus, +html|textarea:-moz-ui-invalid:focus { + box-shadow: 0 0 0 3px var(--in-content-border-invalid-shadow); +} + +html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled, +html|textarea:disabled, +xul|search-textbox[disabled="true"] { + opacity: 0.4; +} + +/* 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 */ + +xul|checkbox { + appearance: none; + height: 30px; + margin: 2px 0; +} + +xul|*.checkbox-check, +html|input[type="checkbox"] { + appearance: none; + width: 20px; + height: 20px; + padding: 1px; + border: 1px solid var(--in-content-box-border-color); + border-radius: 2px; + margin: 0; + margin-inline-end: 10px; + background-color: var(--grey-90-a10); + background-position: center; + background-repeat: no-repeat; +} + +xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, +html|input[type="checkbox"]:enabled:hover { + background-color: var(--grey-90-a20); +} + +xul|checkbox[checked] > xul|*.checkbox-check, +html|input[type="checkbox"]:checked { + -moz-context-properties: fill; + fill: currentColor; + color: white; + background-color: var(--blue-60); +} + +xul|checkbox[checked] > xul|*.checkbox-check { + list-style-image: url("chrome://global/skin/icons/check.svg"); +} + +html|input[type="checkbox"]:checked { + background-image: url("chrome://global/skin/icons/check.svg"); +} + +xul|checkbox:not([disabled="true"])[checked]:hover > xul|*.checkbox-check, +html|input[type="checkbox"]:enabled:checked:hover { + background-color: var(--blue-70); +} + +xul|richlistitem > xul|*.checkbox-check { + margin: 3px 6px; +} + +html|*.toggle-container-with-text { + display: flex; + align-items: center; +} + +xul|radio { + margin-inline-start: 0; + appearance: none; +} + +xul|*.radio-check { + appearance: none; + width: 20px; + height: 20px; + border: 1px solid var(--in-content-box-border-color); + border-radius: 50%; + margin: 0; + margin-inline-end: 10px; + background-color: var(--grey-90-a10); +} + +xul|radio:not([disabled="true"]):hover > xul|*.radio-check { + background-color: var(--grey-90-a20); +} + +xul|*.radio-check[selected] { + list-style-image: url("chrome://global/skin/in-content/radio.svg"); + -moz-context-properties: fill; + fill: currentColor; + color: white; + background-color: var(--blue-60); +} + +xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check { + background-color: var(--blue-70); +} + +xul|*.radio-label-box { + margin-inline: -1px 8px; /* the negative margin-inline-start for the transparent border */ + padding-inline-start: 0; +} + +/* Disabled checkboxes, radios and labels */ + +xul|checkbox[disabled="true"], +xul|radio[disabled="true"], +xul|label[disabled="true"] { + color: inherit; +} + +xul|checkbox[disabled="true"], +html|input[type="checkbox"]:disabled, +xul|radio[disabled="true"], +xul|label[disabled="true"] { + opacity: 0.5; +} + +/* Category List */ + +#categories { + appearance: none; + background-color: initial; /* override the background-color set on all richlistboxes in common.inc.css */ + margin: 70px 0 0; + border-width: 0; + width: var(--in-content-sidebar-width); + box-shadow: none; +} + +@media print { + #categories { + display: none; + } +} + +html|*#categories { + box-sizing: border-box; + padding: 1px; +} + +#categories > .category { + min-height: 48px; + appearance: none; + margin-inline-start: 34px; + padding-inline: 10px; + transition: background-color 150ms; +} + +html|*#categories > html|*.category { + border: 0; + background-color: initial; + background-size: 24px; + background-repeat: no-repeat; + background-position-x: 10px; + background-position-y: 12px; + margin-inline-end: 0; + min-width: auto; + padding-inline-start: 34px; + text-align: start; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; +} + +html|*#categories > html|*.category:dir(rtl) { + background-position-x: right 10px; +} + +#categories > .category:hover { + background-color: var(--in-content-category-background-hover); + border-radius: 2px; +} + +#categories > .category:hover:active { + background-color: var(--in-content-category-background-active); +} + +#categories > .category[selected], +#categories > .category.selected { + color: var(--in-content-category-text-selected) !important; + background-color: transparent; +} + +#categories > .category[selected]:hover, +#categories > .category.selected:hover { + background-color: var(--in-content-category-background-selected-hover); +} + +#categories > .category[selected]:hover:active, +#categories > .category.selected:hover:active { + color: var(--in-content-category-text-selected-active) !important; + background-color: var(--in-content-category-background-selected-active); +} + +#categories[keyboard-navigation="true"]:-moz-focusring > .category[current] { + outline: var(--in-content-category-outline-focus); +} + +html|*#categories[last-input-type="mouse"] > html|button.category:-moz-focusring { + outline: none; + box-shadow: none; +} + +.category-name { + font-size: 1.07em; + line-height: 1.4em; + padding-inline-start: 9px; + margin: 0; + user-select: none; +} + +.category-icon { + width: 24px; + height: 24px; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; +} + +.category[selected] > .category-icon, +.category.selected > .category-icon { + fill-opacity: 1; +} + +@media (max-width: 830px) { + :root { + --in-content-sidebar-width: 118px; + } + + html|*.category:not(.category-no-icon) > html|*.category-name, + .category-icon + .category-name { + display: none; + } + + #categories > .category { + padding-inline-start: 12px; /* make category icons align center */ + margin-inline-end: 33px; + } + + html|*#categories > html|*.category { + width: 48px; + min-width: auto; + box-sizing: border-box; + } + + html|*#categories > html|*.category, + /* We need to override the full-width RTL rule, so explicitly specify RTL. */ + html|*#categories > html|*.category:dir(rtl) { + background-position: center; + } + + .main-content { + padding-inline: 0; + } + + .pane-container { + margin-inline-end: 10px; + } +} + +/* header */ + +.header { + 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: 1.46em; + font-weight: 300; + line-height: 1.3em; + margin: 0; + user-select: none; +} + +/* List boxes */ + +html|select[size][multiple], +xul|listheader, +xul|richlistbox { + appearance: none; + margin-inline: 0; + background-color: var(--in-content-box-background); + border: 1px solid var(--in-content-box-border-color); + border-radius: 2px; + color: var(--in-content-text-color); +} + +xul|listheader { + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding-bottom: 1px; + box-shadow: inset 0 -1px var(--in-content-border-color); +} + +xul|listheader + xul|richlistbox { + margin-top: 0; + border-top: none; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +html|select[size][multiple] > html|option, +xul|treechildren::-moz-tree-row { + padding: 0.3em; + margin: 0; + border: none; + border-radius: 0; + background-image: none; +} + +xul|treechildren::-moz-tree-row(multicol, odd) { + background-color: var(--in-content-box-background-odd); +} + +html|select[size][multiple] > html|option:hover, +xul|treechildren::-moz-tree-row(hover) { + background-color: var(--in-content-item-hover); +} + +xul|treechildren::-moz-tree-row(selected) { + background-color: var(--in-content-item-selected); +} + +xul|panel[type="autocomplete-richlistbox"] { + background-color: var(--in-content-box-background); + border: 1px solid var(--in-content-box-border-color); + color: var(--in-content-text-color); +} + +/* Trees */ + +xul|tree { + appearance: none; + font-size: 1em; + border: 1px solid var(--in-content-box-border-color); + border-radius: 2px; + background-color: var(--in-content-box-background); + margin: 0; +} + +xul|tree:-moz-focusring, +xul|richlistbox:-moz-focusring { + border-color: var(--in-content-border-active); + box-shadow: 0 0 0 1px var(--in-content-border-active), + 0 0 0 4px var(--in-content-border-active-shadow); +} + +xul|treecols { + appearance: none; + border: none; + border-bottom: 1px solid var(--in-content-border-color); + padding: 0; +} + +xul|treecol:not([hideheader="true"]), +xul|treecolpicker { + appearance: none; + border: none; + background-color: var(--in-content-box-background-hover); + color: #808080; + padding: 5px 10px; +} + +xul|treecol:not([hideheader="true"], [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"], :first-child), +xul|treecolpicker { + border-inline-start-width: 1px; + border-inline-start-style: solid; + border-image: linear-gradient(transparent 0%, transparent 20%, var(--in-content-box-border-color) 20%, var(--in-content-box-border-color) 80%, transparent 80%, transparent 100%) 1 1; +} + +xul|treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { + list-style-image: url("chrome://global/skin/in-content/dropdown.svg"); + -moz-context-properties: fill; + fill: currentColor; + width: 18px; + height: 18px; +} + +xul|treecol[sortDirection="ascending"]:not([hideheader="true"]) > xul|*.treecol-sortdirection { + 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, +xul|treechildren::-moz-tree-twisty, +xul|treechildren::-moz-tree-image { + color: var(--in-content-text-color); +} + +xul|treechildren::-moz-tree-cell-text(selected), +xul|treechildren::-moz-tree-twisty(selected), +xul|treechildren::-moz-tree-image(selected) { + color: var(--in-content-selected-text); +} + +/* Message bars */ +.message-bar { + background-color: var(--in-content-box-info-background); + border-radius: 4px; + min-height: 32px; + -moz-box-align: center; + padding: 4px; +} + +.message-bar-description { + margin: 2px 0; + line-height: 1.25; +} + +/* The message-bar-button styles have extra specificity to override + * the defaults for buttons. */ +.message-bar-content > .message-bar-button { + background-color: var(--grey-90-a10); + border: none; + border-radius: 2px; + height: 24px; + margin-inline-start: 8px; + padding: 0 8px; +} + +.message-bar-content > .message-bar-button:hover { + background-color: var(--grey-90-a20); +} + +.message-bar-content > .message-bar-button:hover:active { + background-color: var(--grey-90-a30); +} + +.message-bar-icon { + list-style-image: url("chrome://global/skin/icons/identity-icon.svg"); + width: 24px; + height: 24px; + padding: 4px; + margin-inline-end: 4px; + -moz-context-properties: fill; + fill: currentColor; +} + +/* Warning styles */ +.message-bar-warning { + background-color: var(--yellow-50); + color: var(--yellow-90); +} + +.message-bar-warning > .message-bar-icon { + list-style-image: url("chrome://browser/skin/warning.svg"); +} + +input[type="text"][warning]:enabled:not(:focus) { + border-color: var(--yellow-60); + box-shadow: 0 0 0 1px var(--yellow-60), 0 0 0 4px var(--yellow-60-a30); +} + +.card { + background: var(--in-content-box-background); + /* Needed for high-contrast where the border will appear. */ + border: 1px solid transparent; + border-radius: 4px; + box-shadow: var(--card-shadow); + margin: 0 0 8px; + /* Remove the border from the overall padding. */ + padding: calc(var(--card-padding) - 1px); + transition: box-shadow 150ms; +} + +.card:not(.card-no-hover):hover { + box-shadow: var(--card-shadow-hover); +} + +.card-heading-image { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + margin: -16px -16px 16px; +} + +.card-heading-image:dir(rtl) { + transform: scaleX(-1); +} + +.sidebar-footer-list { + list-style-type: none; + margin-block: 0 36px; + margin-inline: 34px 0; + padding: 0; +} + +.sidebar-footer-link, +.sidebar-footer-button > .text-link { + -moz-box-flex: 1; + margin-inline: 34px 0; + text-decoration: none; + color: currentColor; + width: 36px; + height: 36px; + cursor: default; +} + +.sidebar-footer-link { + display: flex; + align-items: center; + background-size: 16px; + background-repeat: no-repeat; + background-position-x: 13px; + background-position-y: 10px; + cursor: default; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + padding-inline-start: 43px; + + /* These override the common styles. */ + margin: 0; + font-size: .9em; + width: auto; +} + +.sidebar-footer-link:dir(rtl) { + background-position-x: right 13px; +} + +.sidebar-footer-link, +.sidebar-footer-link:hover, +.sidebar-footer-link:hover:active, +.sidebar-footer-link:visited { + text-decoration: none; + color: currentColor; +} + +.sidebar-footer-link:hover, +.sidebar-footer-button > .text-link:hover { + background-color: var(--in-content-category-background-hover); + border-radius: 2px; +} + +.sidebar-footer-link:hover:active:not([disabled]), +.sidebar-footer-button > .text-link:hover:active:not([disabled]) { + background-color: var(--in-content-category-background-active); + color: currentColor; +} + +.sidebar-footer-link:-moz-focusring, +.sidebar-footer-button > .text-link:-moz-focusring { + outline: var(--in-content-category-outline-focus); + outline-offset: -1px; +} + +.sidebar-footer-icon { + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + width: 16px; + height: 16px; + margin: 10px; + margin-inline-start: 13px; + vertical-align: middle; +} + +.sidebar-footer-icon:hover { + fill: currentColor !important; +} + +.sidebar-footer-button:last-of-type { + margin-bottom: 36px; +} + +xul|*.help-icon { + list-style-image: url("chrome://global/skin/icons/help.svg"); +} + +html|*.help-icon { + background-image: url("chrome://global/skin/icons/help.svg"); +} + +.preferences-icon { + background-image: url("chrome://global/skin/icons/settings.svg"); +} + +.addons-icon { + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); + /* The add-ons icon doesn't have much (any?) margin, so make it a bit smaller. */ + width: 14px; + height: 14px; + margin-inline-start: 15px; +} + +.sidebar-footer-label { + margin: 0 4px; + font-size: .9em; + user-select: none; +} + +@media (max-width: 830px) { + .sidebar-footer-button > .text-link { + -moz-box-flex: 0; + width: 36px; + height: 36px; + margin-inline-start: 0; + } + + .sidebar-footer-icon { + margin: 10px; + } + + .sidebar-footer-label { + display: none; + } + + .sidebar-footer-list { + margin-inline-start: 40px; + } + + .sidebar-footer-link { + width: 36px; + height: 36px; + padding-inline-start: 0; + margin-inline-start: 1px; + } + + .sidebar-footer-link, + /* We need to override the full-width RTL rule, so explicitly specify RTL. */ + .sidebar-footer-link:dir(rtl) { + background-position: center; + } + + .sidebar-footer-link-text { + display: none; + } +} + +.back-button { + -moz-context-properties: fill; + fill: currentColor; + background-image: url("chrome://global/skin/icons/arrow-left.svg"); + background-repeat: no-repeat; + background-position: center; + min-width: auto; + width: 32px; + margin-block: 0; + margin-inline-start: 0; +} + +.back-button:-moz-locale-dir(rtl), +.back-button:dir(rtl) { + transform: scaleX(-1); +} diff --git a/toolkit/themes/shared/in-content/dropdown.svg b/toolkit/themes/shared/in-content/dropdown.svg new file mode 100644 index 0000000000..8602fead13 --- /dev/null +++ b/toolkit/themes/shared/in-content/dropdown.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" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M12,6l-4.016,4L4,6H12z"/>
+</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 0000000000..6943a3340e --- /dev/null +++ b/toolkit/themes/shared/in-content/info-pages.inc.css @@ -0,0 +1,183 @@ +% 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"); + +:root { + --in-content-container-min-width: 13em; + --in-content-container-max-width: 52em; +} + +/* Body and container */ +body { + display: flex; + flex-direction: column; + box-sizing: border-box; + min-height: 100vh; + padding: 40px 48px; + align-items: center; + justify-content: center; +} + +body.wide-container { + display: block; +} + +.container { + min-width: var(--in-content-container-min-width); + max-width: var(--in-content-container-max-width); +} + +.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.2em; + -moz-context-properties: fill; + fill: currentColor; +} + +.title:-moz-locale-dir(rtl), +.title:dir(rtl) { + background-position: right 0; +} + +.title-text { + font-size: inherit; + padding-bottom: 0.4em; +} + +@media (max-width: 970px) { + .title { + background-image: none !important; + padding-inline-start: 0; + margin-inline-start: 0; + } + + .title-text { + padding-top: 0; + } +} + +ul, ol { + margin: 1em 0; + padding: 0; + margin-inline-start: 2em; +} + +ul > li, ol > li { + margin-bottom: .5em; +} + +ul { + list-style: disc; +} + +dt { + font-weight: bold; +} + +ul.columns { + column-count: 2; + column-gap: 5em; +} + +@media (max-width: 35em) { + ul.columns { + column-count: 1; + } +} + +/* Buttons */ +.button-container { + margin-top: 1.2em; +} + +button { + padding: 0 1.5em; +} + +.button-container > button:first-child { + margin-inline-start: 0; +} + +/* Trees */ +.tree-container { + margin-top: 1.2em; + flex: 1 0px; + min-height: 12em; +} + +.tree-container > tree { + height: 100%; +} + +tree { + width: 100%; +} + +/* Tables */ +table { + background-color: var(--in-content-table-background); + color: var(--in-content-text-color); + font: message-box; + text-align: start; + width: 100%; + border: 1px solid var(--in-content-border-color); + border-spacing: 0; +} + +th, td { + border: 1px solid var(--in-content-border-color); + padding: 4px; + text-align: match-parent; +} + +thead th { + text-align: center; +} + +th { + background-color: var(--in-content-table-header-background); + color: var(--in-content-selected-text); +} + +th.column { + white-space: nowrap; + width: 0; +} + +td { + border-color: var(--in-content-table-border-dark-color); + unicode-bidi: plaintext; /* Make sure file paths will be LTR */ +} + +#update-row > td:dir(rtl), +#profile-row > td:dir(rtl) { + unicode-bidi: normal; +} + +/* Illustrated Info Pages */ +.illustrated .title { + margin-inline-start: 0; + padding-inline-start: 0; +} + +.notice-box { + background-color: var(--in-content-table-background); + border: 1px solid var(--in-content-border-color); + color: var(--in-content-text-color); + padding: 16px; +} diff --git a/toolkit/themes/shared/in-content/radio.svg b/toolkit/themes/shared/in-content/radio.svg new file mode 100644 index 0000000000..2b910f54e3 --- /dev/null +++ b/toolkit/themes/shared/in-content/radio.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" viewBox="0 0 21 21"> + <circle fill="context-fill" cx="10.5" cy="10.5" r="6"/> +</svg> + diff --git a/toolkit/themes/shared/in-content/toggle-button.css b/toolkit/themes/shared/in-content/toggle-button.css new file mode 100644 index 0000000000..a64f5dc130 --- /dev/null +++ b/toolkit/themes/shared/in-content/toggle-button.css @@ -0,0 +1,75 @@ +/* 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/. */ + +input[type="checkbox"].toggle-button { + --button-height: 16px; + --button-half-height: 8px; + --button-width: 26px; + --button-border-width: 1px; + /* dot-size = button-height - 2*dot-margin - 2*button-border-width */ + --dot-size: 10px; + --dot-margin: 2px; + /* --dot-transform-x = button-width - 2*dot-margin - dot-size - 2*button-border-width */ + --dot-transform-x: 10px; + --border-color: hsla(210,4%,10%,.14); +} + +input[type="checkbox"].toggle-button { + appearance: none; + padding: 0; + margin: 0; + outline: 0; + border: var(--button-border-width) solid var(--border-color); + height: var(--button-height); + width: var(--button-width); + border-radius: var(--button-half-height); + background: var(--in-content-button-background); + box-sizing: border-box; +} +input[type="checkbox"].toggle-button:enabled:hover { + background: var(--in-content-button-background-hover); + border-color: var(--border-color); +} +input[type="checkbox"].toggle-button:enabled:active { + background: var(--in-content-button-background-active); + border-color: var(--border-color); +} +input[type="checkbox"].toggle-button:focus { + box-shadow: 0 0 0 1px var(--border-color), 0 0 0 4px rgba(10, 132, 255, 0.3); +} +input[type="checkbox"].toggle-button:checked:focus { + box-shadow: 0 0 0 1px var(--in-content-border-active), 0 0 0 4px rgba(10, 132, 255, 0.3); +} + +input[type="checkbox"].toggle-button:checked { + background: var(--in-content-primary-button-background); + border-color: var(--in-content-primary-button-background-hover); +} +input[type="checkbox"].toggle-button:checked:hover { + background: var(--in-content-primary-button-background-hover); + border-color: var(--in-content-primary-button-background-active); +} +input[type="checkbox"].toggle-button:checked:active { + background: var(--in-content-primary-button-background-active); + border-color: var(--in-content-primary-button-background-active); +} + +input[type="checkbox"].toggle-button::before { + display: block; + content: ""; + background: #fff; + height: var(--dot-size); + width: var(--dot-size); + margin: var(--dot-margin); + border-radius: 50%; + outline: 1px solid var(--border-color); + -moz-outline-radius: 50%; + transition: transform 100ms; +} +input[type="checkbox"].toggle-button:checked::before { + transform: translateX(var(--dot-transform-x)); +} +input[type="checkbox"].toggle-button:dir(rtl)::before { + scale: -1; +} diff --git a/toolkit/themes/shared/incontent-icons/blocked.svg b/toolkit/themes/shared/incontent-icons/blocked.svg new file mode 100644 index 0000000000..0be260a7f4 --- /dev/null +++ b/toolkit/themes/shared/incontent-icons/blocked.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" viewBox="0 0 16 16"> + <path fill="context-fill" fill-rule="evenodd" d="M3 9h10V7H3v2zm5-8a7 7 0 1 0 0 14A7 7 0 0 0 8 1z"/> +</svg> diff --git a/toolkit/themes/shared/incontent-icons/info.svg b/toolkit/themes/shared/incontent-icons/info.svg new file mode 100644 index 0000000000..142b32beb2 --- /dev/null +++ b/toolkit/themes/shared/incontent-icons/info.svg @@ -0,0 +1,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" viewBox="0 0 100 100" fill="context-fill #424e5a"> + <circle cx="50" cy="50" r="44" stroke="context-fill #424e5a" stroke-width="11" fill="none"/> + <circle cx="50" cy="24.6" r="6.4"/> + <rect x="45" y="39.9" width="10.1" height="41.8"/> +</svg> diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn new file mode 100644 index 0000000000..e163fb3d5f --- /dev/null +++ b/toolkit/themes/shared/jar.inc.mn @@ -0,0 +1,136 @@ +# 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/. + +# This is not a complete / proper jar manifest. It is included by the +# actual theme-specific manifests, so that shared resources need only +# be specified once. As a result, the source file paths are relative +# to the location of the actual manifest. + +toolkit.jar: +% skin global classic/1.0 %skin/classic/global/ +% skin help classic/1.0 %skin/classic/help/ +% skin mozapps classic/1.0 %skin/classic/mozapps/ + skin/classic/global/about.css (../../shared/about.css) + skin/classic/global/aboutCache.css (../../shared/aboutCache.css) + skin/classic/global/aboutCacheEntry.css (../../shared/aboutCacheEntry.css) + skin/classic/global/aboutHttpsOnlyError.css (../../shared/aboutHttpsOnlyError.css) + skin/classic/global/aboutMemory.css (../../shared/aboutMemory.css) + skin/classic/global/aboutNetworking.css (../../shared/aboutNetworking.css) + skin/classic/global/aboutReader.css (../../shared/aboutReader.css) + skin/classic/global/aboutRights.css (../../shared/aboutRights.css) + skin/classic/global/aboutLicense.css (../../shared/aboutLicense.css) + skin/classic/global/aboutSupport.css (../../shared/aboutSupport.css) + skin/classic/global/appPicker.css (../../shared/appPicker.css) +* skin/classic/global/arrowscrollbox.css (../../shared/arrowscrollbox.css) + skin/classic/global/close-icon.css (../../shared/close-icon.css) + skin/classic/global/config.css (../../shared/config.css) + skin/classic/global/datetimeinputpickers.css (../../shared/datetimeinputpickers.css) + skin/classic/global/notification.css (../../shared/notification.css) + skin/classic/global/numberinput.css (../../shared/numberinput.css) + skin/classic/global/in-content/toggle-button.css (../../shared/in-content/toggle-button.css) + skin/classic/global/icons/arrow-left.svg (../../shared/icons/arrow-left.svg) + skin/classic/global/icons/autoscroll.svg (../../shared/icons/autoscroll.svg) + skin/classic/global/icons/autoscroll-horizontal.svg (../../shared/icons/autoscroll-horizontal.svg) + skin/classic/global/icons/autoscroll-vertical.svg (../../shared/icons/autoscroll-vertical.svg) + skin/classic/global/icons/check.svg (../../shared/icons/check.svg) + skin/classic/global/icons/check-partial.svg (../../shared/icons/check-partial.svg) + skin/classic/global/icons/chevron.svg (../../shared/icons/chevron.svg) + skin/classic/global/icons/close.svg (../../shared/icons/close.svg) + skin/classic/global/icons/connection-mixed-active-loaded.svg (../../shared/icons/connection-mixed-active-loaded.svg) + skin/classic/global/icons/connection-mixed-passive-loaded.svg (../../shared/icons/connection-mixed-passive-loaded.svg) + skin/classic/global/icons/searchfield-cancel.svg (../../shared/icons/searchfield-cancel.svg) + skin/classic/global/pictureinpicture/close-pip.svg (../../shared/pictureinpicture/close-pip.svg) + skin/classic/global/icons/columnpicker.svg (../../shared/icons/columnpicker.svg) + skin/classic/global/icons/delete.svg (../../shared/icons/delete.svg) + skin/classic/global/icons/document.svg (../../shared/icons/document.svg) + skin/classic/global/icons/error.svg (../../shared/icons/error.svg) + skin/classic/global/icons/find-previous-arrow.svg (../../shared/icons/find-previous-arrow.svg) + skin/classic/global/icons/find-next-arrow.svg (../../shared/icons/find-next-arrow.svg) +#ifndef XP_MACOSX + skin/classic/global/icons/findFile.svg (../../shared/icons/folder.svg) +#else + skin/classic/global/icons/findFile.svg (../../shared/icons/magnifier.svg) +#endif + skin/classic/global/icons/heart.svg (../../shared/icons/heart.svg) + skin/classic/global/icons/help.svg (../../shared/icons/help.svg) + skin/classic/global/icons/info.svg (../../shared/incontent-icons/info.svg) + skin/classic/global/icons/loading.png (../../shared/icons/loading.png) + skin/classic/global/icons/loading@2x.png (../../shared/icons/loading@2x.png) + skin/classic/global/icons/more.svg (../../shared/icons/more.svg) + skin/classic/global/icons/open-in-new.svg (../../shared/icons/open-in-new.svg) + skin/classic/global/icons/performance.svg (../../shared/icons/performance.svg) + skin/classic/global/icons/print.svg (../../shared/icons/print.svg) + skin/classic/global/pictureinpicture/pause.svg (../../shared/pictureinpicture/pause.svg) + skin/classic/global/pictureinpicture/play.svg (../../shared/pictureinpicture/play.svg) + skin/classic/global/icons/identity-icon.svg (../../shared/icons/identity-icon.svg) + skin/classic/global/icons/resizer.svg (../../shared/icons/resizer.svg) + skin/classic/global/icons/settings.svg (../../shared/icons/settings.svg) + skin/classic/global/icons/shortcut.svg (../../shared/icons/shortcut.svg) + skin/classic/global/icons/spinner-arrow-down.svg (../../shared/icons/spinner-arrow-down.svg) + skin/classic/global/icons/spinner-arrow-up.svg (../../shared/icons/spinner-arrow-up.svg) + skin/classic/global/icons/twisty-collapsed.svg (../../shared/icons/twisty-collapsed.svg) + skin/classic/global/icons/twisty-collapsed-rtl.svg (../../shared/icons/twisty-collapsed-rtl.svg) + skin/classic/global/icons/twisty-expanded.svg (../../shared/icons/twisty-expanded.svg) + skin/classic/global/icons/icon-refresh.svg (../../shared/icons/icon-refresh.svg) + skin/classic/global/icons/update-icon.svg (../../shared/icons/update-icon.svg) + skin/classic/global/icons/arrow-dropdown-12.svg (../../shared/icons/arrow-dropdown-12.svg) + skin/classic/global/icons/arrow-dropdown-16.svg (../../shared/icons/arrow-dropdown-16.svg) + skin/classic/global/icons/arrow-up-12.svg (../../shared/icons/arrow-up-12.svg) + skin/classic/global/pictureinpicture/unpip.svg (../../shared/pictureinpicture/unpip.svg) + skin/classic/global/icons/warning.svg (../../shared/icons/warning.svg) + skin/classic/global/illustrations/about-rights.svg (../../shared/illustrations/about-rights.svg) + skin/classic/global/icons/blocked.svg (../../shared/incontent-icons/blocked.svg) + skin/classic/global/illustrations/about-license.svg (../../shared/illustrations/about-license.svg) + skin/classic/global/narrate.css (../../shared/narrate.css) + skin/classic/global/narrate/arrow.svg (../../shared/narrate/arrow.svg) + skin/classic/global/narrate/back.svg (../../shared/narrate/back.svg) + skin/classic/global/narrate/fast.svg (../../shared/narrate/fast.svg) + skin/classic/global/narrate/forward.svg (../../shared/narrate/forward.svg) + skin/classic/global/narrate/slow.svg (../../shared/narrate/slow.svg) + skin/classic/global/narrate/start.svg (../../shared/narrate/start.svg) + skin/classic/global/narrate/stop.svg (../../shared/narrate/stop.svg) + skin/classic/global/narrate/headphone.svg (../../shared/narrate/headphone.svg) + skin/classic/global/narrate/headphone-active.svg (../../shared/narrate/headphone-active.svg) + skin/classic/global/in-content/dropdown.svg (../../shared/in-content/dropdown.svg) + skin/classic/global/in-content/radio.svg (../../shared/in-content/radio.svg) + skin/classic/global/reader/RM-Sans-Serif.svg (../../shared/reader/RM-Sans-Serif.svg) + skin/classic/global/reader/RM-Serif.svg (../../shared/reader/RM-Serif.svg) + skin/classic/global/reader/RM-Minus-24x24.svg (../../shared/reader/RM-Minus-24x24.svg) + skin/classic/global/reader/RM-Plus-24x24.svg (../../shared/reader/RM-Plus-24x24.svg) + skin/classic/global/reader/RM-Type-Controls-24x24.svg (../../shared/reader/RM-Type-Controls-24x24.svg) + skin/classic/global/reader/RM-Type-Controls-Arrow.svg (../../shared/reader/RM-Type-Controls-Arrow.svg) + skin/classic/global/reader/RM-Content-Width-Minus-42x16.svg (../../shared/reader/RM-Content-Width-Minus-42x16.svg) + skin/classic/global/reader/RM-Content-Width-Plus-44x16.svg (../../shared/reader/RM-Content-Width-Plus-44x16.svg) + skin/classic/global/reader/RM-Line-Height-Minus-38x14.svg (../../shared/reader/RM-Line-Height-Minus-38x14.svg) + skin/classic/global/reader/RM-Line-Height-Plus-38x24.svg (../../shared/reader/RM-Line-Height-Plus-38x24.svg) + skin/classic/global/reader/close-16.svg (../../shared/reader/close-16.svg) + skin/classic/global/reader/pocket.svg (../../shared/reader/pocket.svg) + skin/classic/global/media/audioMutedButton.svg (../../shared/media/audioMutedButton.svg) + skin/classic/global/media/audioNoAudioButton.svg (../../shared/media/audioNoAudioButton.svg) + skin/classic/global/media/audioUnmutedButton.svg (../../shared/media/audioUnmutedButton.svg) + skin/classic/global/media/castingButton-ready.svg (../../shared/media/castingButton-ready.svg) + skin/classic/global/media/castingButton-active.svg (../../shared/media/castingButton-active.svg) + skin/classic/global/media/closedCaptionButton-cc-off.svg (../../shared/media/closedCaptionButton-cc-off.svg) + skin/classic/global/media/closedCaptionButton-cc-on.svg (../../shared/media/closedCaptionButton-cc-on.svg) + skin/classic/global/media/fullscreenEnterButton.svg (../../shared/media/fullscreenEnterButton.svg) + skin/classic/global/media/fullscreenExitButton.svg (../../shared/media/fullscreenExitButton.svg) + skin/classic/global/media/TopLevelImageDocument.css (../../shared/media/TopLevelImageDocument.css) + skin/classic/global/media/TopLevelVideoDocument.css (../../shared/media/TopLevelVideoDocument.css) + skin/classic/global/media/imagedoc-lightnoise.png (../../shared/media/imagedoc-lightnoise.png) + skin/classic/global/media/imagedoc-darknoise.png (../../shared/media/imagedoc-darknoise.png) +* skin/classic/global/media/videocontrols.css (../../shared/media/videocontrols.css) + skin/classic/global/media/pauseButton.svg (../../shared/media/pauseButton.svg) + skin/classic/global/media/playButton.svg (../../shared/media/playButton.svg) + skin/classic/global/media/error.png (../../shared/media/error.png) + skin/classic/global/media/throbber.png (../../shared/media/throbber.png) + skin/classic/global/media/stalled.png (../../shared/media/stalled.png) +#ifdef MOZ_PLACES + skin/classic/mozapps/places/defaultFavicon.svg (../../shared/places/defaultFavicon.svg) +#endif + skin/classic/global/plugins/plugin.svg (../../shared/plugins/plugin.svg) + skin/classic/global/plugins/plugin-blocked.svg (../../shared/plugins/plugin-blocked.svg) + skin/classic/global/pictureinpicture/player.css (../../shared/pictureinpicture/player.css) + skin/classic/global/media/pictureinpicture.svg (../../shared/media/pictureinpicture.svg) + skin/classic/global/pictureinpicture/audio.svg (../../shared/pictureinpicture/audio.svg) + skin/classic/global/pictureinpicture/audio-mute.svg (../../shared/pictureinpicture/audio-mute.svg) diff --git a/toolkit/themes/shared/media/TopLevelImageDocument.css b/toolkit/themes/shared/media/TopLevelImageDocument.css new file mode 100644 index 0000000000..5242175161 --- /dev/null +++ b/toolkit/themes/shared/media/TopLevelImageDocument.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/. */ + +@media not print { + /* N.B.: Remember to update ImageDocument.css in the tree or reftests may fail! */ + + body { + color: #eee; + background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); + } + + img.transparent { + background: hsl(0,0%,90%) url("chrome://global/skin/media/imagedoc-lightnoise.png"); + color: #222; + } +} diff --git a/toolkit/themes/shared/media/TopLevelVideoDocument.css b/toolkit/themes/shared/media/TopLevelVideoDocument.css new file mode 100644 index 0000000000..2d857ced2d --- /dev/null +++ b/toolkit/themes/shared/media/TopLevelVideoDocument.css @@ -0,0 +1,12 @@ +/* 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/. */ + +body { + background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); + background-color: rgb(33,33,33); /* Average color of that ^ image. */ +} + +video { + box-shadow: 0 0 5px rgba(0,0,0,0.6); +} diff --git a/toolkit/themes/shared/media/audioMutedButton.svg b/toolkit/themes/shared/media/audioMutedButton.svg new file mode 100644 index 0000000000..d0b9cb8424 --- /dev/null +++ b/toolkit/themes/shared/media/audioMutedButton.svg @@ -0,0 +1,10 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" d="M3.52,5.367c-1.332,0-2.422,1.09-2.422,2.422v2.422c0,1.332,1.09,2.422,2.422,2.422h1.516l4.102,3.633V1.735L5.035,5.367H3.52z"/> + <path fill="context-fill" fill-rule="evenodd" d="M12.155,12.066l-1.138-1.138l4.872-4.872l1.138,1.138 L12.155,12.066z"/> + <path fill="context-fill" fill-rule="evenodd" d="M10.998,7.204l1.138-1.138l4.872,4.872l-1.138,1.138L10.998,7.204z"/> +</svg> + diff --git a/toolkit/themes/shared/media/audioNoAudioButton.svg b/toolkit/themes/shared/media/audioNoAudioButton.svg new file mode 100644 index 0000000000..7d5c60a09c --- /dev/null +++ b/toolkit/themes/shared/media/audioNoAudioButton.svg @@ -0,0 +1,11 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" + d="M14.901,3.571l-4.412,3.422V1.919L6.286,5.46H4.869c-1.298,0-2.36,1.062-2.36,2.36v2.36 + c0,1.062,0.708,1.888,1.652,2.242l-2.242,1.77l1.18,1.416L16.081,4.987L14.901,3.571z M10.489,16.081V11.36l-2.669,2.36 + L10.489,16.081z"/> +</svg> + diff --git a/toolkit/themes/shared/media/audioUnmutedButton.svg b/toolkit/themes/shared/media/audioUnmutedButton.svg new file mode 100644 index 0000000000..b5f80c0114 --- /dev/null +++ b/toolkit/themes/shared/media/audioUnmutedButton.svg @@ -0,0 +1,13 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" + d="M3.52,5.367c-1.332,0-2.422,1.09-2.422,2.422v2.422c0,1.332,1.09,2.422,2.422,2.422h1.516l4.102,3.633 + V1.735L5.035,5.367H3.52z M12.059,9c0-0.727-0.484-1.211-1.211-1.211v2.422C11.574,10.211,12.059,9.727,12.059,9z M14.48,9 + c0-1.695-1.211-3.148-2.785-3.512l-0.363,1.09C12.422,6.82,13.27,7.789,13.27,9c0,1.211-0.848,2.18-1.938,2.422l0.484,1.09 + C13.27,12.148,14.48,10.695,14.48,9z M12.543,3.188l-0.484,1.09C14.238,4.883,15.691,6.82,15.691,9c0,2.18-1.453,4.117-3.512,4.601 + l0.484,1.09c2.422-0.605,4.238-2.906,4.238-5.691C16.902,6.215,15.086,3.914,12.543,3.188z"/> +</svg> + diff --git a/toolkit/themes/shared/media/castingButton-active.svg b/toolkit/themes/shared/media/castingButton-active.svg new file mode 100644 index 0000000000..f57d30b2c1 --- /dev/null +++ b/toolkit/themes/shared/media/castingButton-active.svg @@ -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/. --> +<svg xmlns="http://www.w3.org/2000/svg" + width="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" + d="M0 13.91v2.454h2.455A2.451 2.451 0 0 0 0 13.909zm0-3.274v1.637a4.092 4.092 0 0 1 4.09 4.09h1.637A5.723 5.723 0 0 0 0 10.637zM14.727 4.91H3.273v1.334a10.664 10.664 0 0 1 6.848 6.848h4.606zM0 7.364V9a7.364 7.364 0 0 1 7.364 7.364H9a9 9 0 0 0-9-9zm16.364-5.728H1.636C.736 1.636 0 2.373 0 3.273v2.454h1.636V3.273h14.728v11.454h-5.728v1.637h5.728c.9 0 1.636-.737 1.636-1.637V3.273c0-.9-.736-1.637-1.636-1.637z" + fill-rule="evenodd"/> +</svg> diff --git a/toolkit/themes/shared/media/castingButton-ready.svg b/toolkit/themes/shared/media/castingButton-ready.svg new file mode 100644 index 0000000000..7622e7349d --- /dev/null +++ b/toolkit/themes/shared/media/castingButton-ready.svg @@ -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/. --> +<svg xmlns="http://www.w3.org/2000/svg" + width="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" + d="M16.364 1.636H1.636C.736 1.636 0 2.373 0 3.273v2.454h1.636V3.273h14.728v11.454h-5.728v1.637h5.728c.9 0 1.636-.737 1.636-1.637V3.273c0-.9-.736-1.637-1.636-1.637zM0 13.91v2.455h2.455A2.451 2.451 0 0 0 0 13.909zm0-3.273v1.637a4.092 4.092 0 0 1 4.09 4.09h1.637A5.723 5.723 0 0 0 0 10.637zm0-3.272V9a7.364 7.364 0 0 1 7.364 7.364H9a9 9 0 0 0-9-9z" + fill-rule="evenodd" /> +</svg> diff --git a/toolkit/themes/shared/media/closedCaptionButton-cc-off.svg b/toolkit/themes/shared/media/closedCaptionButton-cc-off.svg new file mode 100644 index 0000000000..481c5c9cab --- /dev/null +++ b/toolkit/themes/shared/media/closedCaptionButton-cc-off.svg @@ -0,0 +1,16 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" fill-rule="evenodd" + d="M16.531,16.107H5.267l1.982-2H15c0.6,0,1-0.4,1-1V5.274 + l1.946-1.964C17.963,3.399,18,3.483,18,3.576v11.031C18,15.407,17.331,16.107,16.531,16.107z M14.016,8.506h-1.218l1.005-1.014 + C13.913,7.789,13.984,8.128,14.016,8.506z M11.786,12.361c-0.828,0-1.476-0.326-1.913-0.902l1.09-1.101 + c0.136,0.323,0.374,0.541,0.796,0.541c0.514,0,0.695-0.44,0.756-1.014h1.535C13.908,11.43,13.071,12.361,11.786,12.361z + M1.496,16.106C0.697,16.104,0,15.406,0,14.607V3.576c0-0.8,0.7-1.5,1.5-1.5h12.846L16.299,0l1.316,1.283L2.615,17.13L1.496,16.106 + z M3,4.107c-0.6,0-1,0.4-1,1v8c0,0.6,0.4,1,1,1h0.029l2.031-2.16c-0.757-0.503-1.191-1.457-1.191-2.744 + c0-1.936,1.069-3.14,2.428-3.14c1.357,0,2.136,0.76,2.361,2.059l3.777-4.016H3z M8.298,8.506H7.355 + c-0.047-0.623-0.49-1.23-0.99-1.23c-0.561,0-1.337,0.84-1.337,1.995c0,0.674,0.381,1.427,0.95,1.702L8.298,8.506z"/> +</svg> + diff --git a/toolkit/themes/shared/media/closedCaptionButton-cc-on.svg b/toolkit/themes/shared/media/closedCaptionButton-cc-on.svg new file mode 100644 index 0000000000..7f62144b93 --- /dev/null +++ b/toolkit/themes/shared/media/closedCaptionButton-cc-on.svg @@ -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/. --> +<svg xmlns="http://www.w3.org/2000/svg" + width="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" + d="M16.531,1.984H1.5c-0.8,0-1.5,0.7-1.5,1.5v11.031c0,0.8,0.7,1.5,1.5,1.5h15.031 + c0.8,0,1.469-0.7,1.469-1.5V3.484C18,2.684,17.331,1.984,16.531,1.984z + M16,13.016c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1v-8c0-0.6,0.4-1,1-1h12c0.6,0,1,0.4,1,1V13.016z + M6.426,10.807c-0.811,0-0.96-0.789-0.96-1.628c0-1.155,0.338-1.745,0.899-1.745c0.5,0,0.818,0.357,0.866,0.98 + h1.484C8.585,6.877,7.785,5.972,6.297,5.972c-1.359,0-2.428,1.205-2.428,3.14c0,1.944,0.974,3.157,2.583,3.157 + c1.285,0,2.153-0.93,2.295-2.476H7.244C7.183,10.367,6.94,10.807,6.426,10.807z + M11.759,10.807c-0.811,0-0.96-0.789-0.96-1.628c0-1.155,0.338-1.745,0.899-1.745c0.5,0,0.756,0.357,0.803,0.98h1.515 + c-0.129-1.537-0.898-2.443-2.385-2.443c-1.359,0-2.396,1.205-2.396,3.14c0,1.944,0.943,3.157,2.552,3.157 + c1.285,0,2.122-0.93,2.264-2.476h-1.535C12.454,10.367,12.273,10.807,11.759,10.807z"/> +</svg> + diff --git a/toolkit/themes/shared/media/error.png b/toolkit/themes/shared/media/error.png Binary files differnew file mode 100644 index 0000000000..51a73696c8 --- /dev/null +++ b/toolkit/themes/shared/media/error.png diff --git a/toolkit/themes/shared/media/fullscreenEnterButton.svg b/toolkit/themes/shared/media/fullscreenEnterButton.svg new file mode 100644 index 0000000000..5ed0edb640 --- /dev/null +++ b/toolkit/themes/shared/media/fullscreenEnterButton.svg @@ -0,0 +1,13 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" + d="M6.728,10.188l-3.235,3.094l0.017-2.267l-1.513-0.016l0,5l4.987-0.008l0.011-1.537l-2.281-0.022 + l3.097-3.158L6.728,10.188z M14.453,11.004l-0.022,2.281l-3.158-3.097l-1.086,1.083l3.094,3.235l-2.267-0.017l-0.016,1.514l5,0 + l-0.008-4.988L14.453,11.004z M11.015,2.01l-0.011,1.537l2.281,0.022l-3.097,3.158l1.083,1.086l3.235-3.094L14.49,6.986 + l1.513,0.016v-5L11.015,2.01z M6.986,3.511l0.016-1.514l-5,0L2.01,6.985l1.537,0.011l0.022-2.281l3.158,3.097l1.086-1.083 + L4.718,3.494L6.986,3.511z"/> +</svg> + diff --git a/toolkit/themes/shared/media/fullscreenExitButton.svg b/toolkit/themes/shared/media/fullscreenExitButton.svg new file mode 100644 index 0000000000..1a770da285 --- /dev/null +++ b/toolkit/themes/shared/media/fullscreenExitButton.svg @@ -0,0 +1,12 @@ +<!-- 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="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" + d="M2.047,11.135l-0.011,1.537l2.281,0.022L1.22,15.851l1.083,1.086l3.235-3.094l-0.017,2.268l1.513,0.016 + l0-5L2.047,11.135z M13.781,12.587l2.267,0.017l0.016-1.514l-5,0l0.008,4.988l1.537,0.011l0.022-2.281l3.158,3.097l1.086-1.083 + L13.781,12.587z M16.058,5.578l-2.281-0.021l3.097-3.158l-1.083-1.086l-3.235,3.094l0.017-2.267L11.06,2.123v5l4.988-0.008 + L16.058,5.578z M5.516,2.098L5.494,4.379L2.336,1.283L1.25,2.365L4.344,5.6L2.077,5.583L2.06,7.097l5,0L7.053,2.109L5.516,2.098z"/> +</svg> + diff --git a/toolkit/themes/shared/media/imagedoc-darknoise.png b/toolkit/themes/shared/media/imagedoc-darknoise.png Binary files differnew file mode 100644 index 0000000000..5c33e24d4c --- /dev/null +++ b/toolkit/themes/shared/media/imagedoc-darknoise.png diff --git a/toolkit/themes/shared/media/imagedoc-lightnoise.png b/toolkit/themes/shared/media/imagedoc-lightnoise.png Binary files differnew file mode 100644 index 0000000000..1fe5b3a586 --- /dev/null +++ b/toolkit/themes/shared/media/imagedoc-lightnoise.png diff --git a/toolkit/themes/shared/media/pauseButton.svg b/toolkit/themes/shared/media/pauseButton.svg new file mode 100644 index 0000000000..e1d610d1d1 --- /dev/null +++ b/toolkit/themes/shared/media/pauseButton.svg @@ -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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" d="M6.002,1.953C5.172,1.953,4.5,2.626,4.5,3.455v11.08 + c0,0.83,0.672,1.502,1.502,1.502c0.829,0,1.502-0.672,1.502-1.502V3.455C7.504,2.626,6.831,1.953,6.002,1.953z M12,1.953 + c-0.828,0-1.5,0.672-1.5,1.5v11.094c0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5V3.453C13.5,2.625,12.828,1.953,12,1.953z"/> +</svg> + diff --git a/toolkit/themes/shared/media/pictureinpicture.svg b/toolkit/themes/shared/media/pictureinpicture.svg new file mode 100644 index 0000000000..014231af42 --- /dev/null +++ b/toolkit/themes/shared/media/pictureinpicture.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="16" height="16" fill="context-fill"> + <path d="M15 9c.552 0 1 .447 1 1v4c0 .553-.448 1-1 1H9c-.552 0-1-.447-1-1v-4c0-.553.448-1 1-1zm-2-8c1.654 0 3 1.346 3 3v2c0 .553-.448 1-1 1s-1-.447-1-1V4c0-.552-.449-1-1-1H3c-.551 0-1 .448-1 1v8c0 .552.449 1 1 1h2c.552 0 1 .447 1 1 0 .553-.448 1-1 1H3c-1.654 0-3-1.346-3-3V4c0-1.654 1.346-3 3-3zM3.146 4.146c.196-.195.512-.195.708 0L6 6.293V5.5c0-.276.224-.5.5-.5s.5.224.5.5v2c0 .065-.013.13-.039.191-.05.122-.148.22-.27.271C6.63 7.986 6.565 8 6.5 8h-2c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h.793L3.146 4.854c-.195-.196-.195-.512 0-.708z"/> +</svg> diff --git a/toolkit/themes/shared/media/playButton.svg b/toolkit/themes/shared/media/playButton.svg new file mode 100644 index 0000000000..47d44bd402 --- /dev/null +++ b/toolkit/themes/shared/media/playButton.svg @@ -0,0 +1,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" width="18px" height="18px" viewBox="0 0 18 18"> + <path fill="context-fill" d="M3.243,15.155c0,0.845,0.593,1.157,1.317,0.707l9.659-6.041c0.727-0.453,0.722-1.193,0-1.645L4.556,2.137 + C3.827,1.682,3.237,2.014,3.237,2.844v12.312H3.243z"/> +</svg> + diff --git a/toolkit/themes/shared/media/stalled.png b/toolkit/themes/shared/media/stalled.png Binary files differnew file mode 100644 index 0000000000..525375889b --- /dev/null +++ b/toolkit/themes/shared/media/stalled.png diff --git a/toolkit/themes/shared/media/throbber.png b/toolkit/themes/shared/media/throbber.png Binary files differnew file mode 100644 index 0000000000..8e49fe5b2a --- /dev/null +++ b/toolkit/themes/shared/media/throbber.png diff --git a/toolkit/themes/shared/media/videocontrols.css b/toolkit/themes/shared/media/videocontrols.css new file mode 100644 index 0000000000..ef38bbbc33 --- /dev/null +++ b/toolkit/themes/shared/media/videocontrols.css @@ -0,0 +1,839 @@ +/* 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.w3.org/1999/xhtml"); + +.videocontrols { + writing-mode: horizontal-tb; + width: 100%; + height: 100%; + display: inline-block; + overflow: hidden; + + direction: ltr; + /* Prevent unwanted style inheritance. See bug 554717. */ + text-align: left; + list-style-image: none !important; + font: normal normal normal 100%/normal sans-serif !important; + text-decoration: none !important; + white-space: normal !important; +} + +.videocontrols[flipped="true"] { + transform: scaleX(-1); +} + +.controlsContainer { + --clickToPlay-size: 48px; + --button-size: 30px; + --timer-size: 40px; + --timer-long-size: 60px; + --track-size: 5px; + --thumb-size: 13px; + --label-font-size: 13px; + --pip-toggle-padding: 5px; + --pip-toggle-icon-width-height: 16px; + --pip-toggle-translate-x: calc(100% - var(--pip-toggle-icon-width-height) - 2 * var(--pip-toggle-padding)); +} +.controlsContainer.touch { + --clickToPlay-size: 64px; + --button-size: 40px; + --timer-size: 52px; + --timer-long-size: 78px; + --track-size: 7px; + --thumb-size: 16px; + --label-font-size: 16px; +} + +/* Some CSS custom properties defined here are referenced by videocontrols.js */ +.controlBar { + /* Do not delete: these variables are accessed by JavaScript directly. + see videocontrols.js and search for |-width|. */ + --clickToPlay-width: var(--clickToPlay-size); + --playButton-width: var(--button-size); + --scrubberStack-width: 64px; + --muteButton-width: var(--button-size); + --volumeStack-width: 48px; + --castingButton-width: var(--button-size); + --closedCaptionButton-width: var(--button-size); + --fullscreenButton-width: var(--button-size); + --positionDurationBox-width: var(--timer-size); + --durationSpan-width: var(--timer-size); + --positionDurationBox-width-long: var(--timer-long-size); + --durationSpan-width-long: var(--timer-long-size); +} + +.touch .controlBar { + /* Do not delete: these variables are accessed by JavaScript directly. + see videocontrols.js and search for |-width|. */ + --scrubberStack-width: 84px; + --volumeStack-width: 64px; +} + +.controlsContainer [hidden], +.controlBar[hidden] .progressBar, +.controlBar[hidden] .bufferBar, +.pictureInPictureToggleButton[hidden], +.videocontrols[inDOMFullscreen] > .controlsContainer > .controlsOverlay > #pictureInPictureToggle { + display: none; +} + +/* We hide the controlBar visually so it doesn't obscure the video. However, + * we still want to expose it to a11y so users who don't use a mouse can access + * it. + */ +.controlBar[hidden] { + display: flex; + opacity: 0; + pointer-events: none; +} + +.controlBar[size="hidden"] { + display: none; +} + +.controlsSpacer[hideCursor] { + cursor: none; +} + +.controlsContainer, +.progressContainer { + position: relative; + height: 100%; +} + +.stackItem { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 100%; +} + +.statusOverlay { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: rgb(80,80,80, .85); + color: #fff; +} + +.controlsOverlay { + display: flex; + flex-direction: column; + justify-content: center; + position: relative; +} + +.controlsSpacerStack { + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: center; + align-items: center; +} + +.controlBar { + position: relative; + display: flex; + box-sizing: border-box; + justify-content: center; + align-items: center; + overflow: hidden; + height: 40px; + padding: 0 9px; + background-color: rgba(26,26,26,.8); + color: #fff; +} + +.touch .controlBar { + height: 52px; +} + +.controlBar > .button { + height: 100%; + min-width: var(--button-size); + min-height: var(--button-size); + padding: 6px; + border: 0; + margin: 0; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + background-origin: content-box; + background-clip: content-box; + -moz-context-properties: fill; + fill: currentColor; + color: inherit; + /* We don't suppress ::-moz-focus-inner, so that does for a focus indicator */ + outline: none; +} + +.touch .controlBar > .button { + background-size: 24px 24px; +} + +.controlBar > .button:enabled:hover { + fill: #48a0f7; +} + +.controlBar > .button:enabled:hover:active { + fill: #2d89e6; +} + +.playButton { + background-image: url(chrome://global/skin/media/pauseButton.svg); +} +.playButton[paused] { + background-image: url(chrome://global/skin/media/playButton.svg); +} + +.muteButton { + background-image: url(chrome://global/skin/media/audioUnmutedButton.svg); +} +.muteButton[muted] { + background-image: url(chrome://global/skin/media/audioMutedButton.svg); +} +.muteButton[noAudio] { + background-image: url(chrome://global/skin/media/audioNoAudioButton.svg); +} +.muteButton[noAudio] + .volumeStack { + display: none; +} + +.castingButton { + background-image: url(chrome://global/skin/media/castingButton-ready.svg); +} + +.castingButton[enabled] { + background-image: url(chrome://global/skin/media/castingButton-active.svg); +} + +.closedCaptionButton { + background-image: url(chrome://global/skin/media/closedCaptionButton-cc-off.svg); +} +.closedCaptionButton[enabled] { + background-image: url(chrome://global/skin/media/closedCaptionButton-cc-on.svg); +} + +.fullscreenButton { + background-image: url(chrome://global/skin/media/fullscreenEnterButton.svg); +} +.fullscreenButton[fullscreened] { + background-image: url(chrome://global/skin/media/fullscreenExitButton.svg); +} + +.controlBarSpacer { + flex-grow: 1; +} + +.volumeControl::-moz-range-thumb, +.scrubber::-moz-range-thumb { + height: var(--thumb-size); + width: var(--thumb-size); + border: none; + border-radius: 50%; + background-color: #fff; + filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.65)); +} + +.volumeControl, +.scrubber { + outline: none; +} + +.progressBackgroundBar { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.progressStack { + position: relative; + width: 100%; + height: var(--track-size); +} + +.scrubberStack { + /* minus margin to get basis of required width */ + min-width: calc(var(--scrubberStack-width) - 18px); + flex-basis: calc(var(--scrubberStack-width) - 18px); + flex-grow: 2; + flex-shrink: 0; + margin: 0 9px; +} + +.volumeStack { + max-width: 60px; + min-width: var(--volumeStack-width); + flex-grow: 1; + flex-shrink: 0; + margin-right: 6px; + margin-left: 4px; +} + +.bufferBar, +.progressBar, +.scrubber, +.volumeControl { + bottom: 0; + left: 0; + position: absolute; + width: 100%; + height: 100%; + padding: 0; + border: 0; + border-radius: calc(var(--track-size) / 2); + margin: 0; + background: none; + outline: none; +} + +.bufferBar { + background-color: rgba(0,0,0,0.7); +} + +.bufferBar::-moz-progress-bar, +.progressBar::-moz-progress-bar { + height: 100%; + padding: 0; + margin: 0; + border: 0; + border-radius: calc(var(--track-size) / 2); + background: none; +} + +.scrubber:hover::-moz-range-thumb, +.volumeControl:hover::-moz-range-thumb { + background-color: #48a0f7; +} + +.scrubber:active::-moz-range-thumb, +.volumeControl:active::-moz-range-thumb { + background-color: #2d89e6; +} + +.scrubber::-moz-range-track, +.scrubber::-moz-range-progress { + background-color: transparent; +} + +.volumeControl::-moz-range-progress, +.volumeControl::-moz-range-track { + height: var(--track-size); + border-radius: calc(var(--track-size) / 2); +} + +.volumeControl::-moz-range-progress { + background-color: #fff; +} + +.volumeControl::-moz-range-track { + background-color: rgba(0,0,0,0.7); +} + + +.bufferBar::-moz-progress-bar { + background-color: rgba(255,255,255,0.3); + border-radius: calc(var(--track-size) / 2); +} + +.progressBar::-moz-progress-bar { + background-color: #00b6f0; +} + +.textTrackListContainer { + position: absolute; + right: 5px; + bottom: 45px; + top: 5px; + max-width: 80%; + display: flex; + flex-direction: column; + justify-content: end; +} + +.textTrackList { + flex: 0 1 auto; + border: 1px solid #000; + border-radius: 2.5px; + padding: 5px 0; + vertical-align: middle; + background-color: #000; + opacity: 0.7; + overflow-y: auto; +} + +.touch .textTrackList { + bottom: 58px; +} + +.textTrackList > .textTrackItem { + display: block; + width: 100%; + height: var(--button-size); + font-size: var(--label-font-size); + padding: 2px 10px; + border: none; + margin: 0; + white-space: nowrap; + overflow: hidden; + text-align: left; + text-overflow: ellipsis; + color: #fff; + background-color: transparent; +} + +.textTrackList > .textTrackItem:hover { + background-color: #444; +} + +.textTrackList > .textTrackItem[on] { + color: #48a0f7; +} + +.positionLabel, +.durationLabel { + display: none; +} + +.positionDurationBox { + text-align: center; + padding-inline-start: 1px; + padding-inline-end: 9px; + white-space: nowrap; + font: message-box; + font-size: var(--label-font-size); + font-size-adjust: 0.55; + font-variant-numeric: tabular-nums; +} + +%ifdef XP_MACOSX +.positionDurationBox { + font-size-adjust: unset; + font-family: "Helvetica Neue", "Helvetica", sans-serif; +} +%endif + +.duration { + display: inline-block; + white-space: pre; + color: #929292; +} + +.statusIcon { + width: 36px; + height: 36px; + margin-bottom: 20px; +} + +/* Not showing the throbber on mobile because of conflict with m.youtube.com (see bug 1289412) */ +.controlsContainer:not(.mobile) .statusIcon[type="throbber"] { + background: url(chrome://global/skin/media/throbber.png) no-repeat center; +} + +.controlsContainer:not(.mobile) .statusIcon[type="throbber"][stalled] { + background: url(chrome://global/skin/media/stalled.png) no-repeat center; +} + +.statusIcon[type="error"], +.statusIcon[type="pictureInPicture"] { + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +.statusIcon[type="error"] { + min-width: 70px; + min-height: 60px; + background-image: url(chrome://global/skin/media/error.png); +} + +.statusIcon[type="pictureInPicture"] { + min-width: 84px; + min-height: 84px; + background-image: url(chrome://global/skin/media/pictureinpicture.svg); + -moz-context-properties: fill; + fill: currentColor; +} + +.pictureInPictureToggleButton { + display: flex; + appearance: none; + position: absolute; + background-color: #0060df; + color: #fff; + border: 0; + padding: var(--pip-toggle-padding); + right: 0; + top: 50%; + translate: var(--pip-toggle-translate-x) -50%; + transition: opacity 160ms linear, translate 160ms linear; + min-width: max-content; + pointer-events: auto; + opacity: 0; +} + +.pictureInPictureToggleButton[policy="hidden"] { + display: none; +} + +.pictureInPictureToggleButton[policy="top"] { + top: 0%; + translate: var(--pip-toggle-translate-x); +} + +.pictureInPictureToggleButton[policy="one-quarter"] { + top: 25%; +} + +.pictureInPictureToggleButton[policy="three-quarters"] { + top: 75%; +} + +.pictureInPictureToggleButton[policy="bottom"] { + top: 100%; + translate: var(--pip-toggle-translate-x) -100%; +} + +.videocontrols[localedir="rtl"] .statusIcon[type="pictureInPicture"] { + transform: scaleX(-1); +} + +.pictureInPictureToggleLabel { + margin-inline-start: var(--pip-toggle-padding); +} + +@supports -moz-bool-pref("media.videocontrols.picture-in-picture.video-toggle.testing") { + /** + * To make automated tests faster, we drop the transition duration in + * testing mode. + */ + .pictureInPictureToggleButton { + transition-duration: 10ms; + } +} + +/* Overlay Play button */ +.clickToPlay { + min-width: var(--clickToPlay-size); + min-height: var(--clickToPlay-size); + border-radius: 50%; + background-image: url(chrome://global/skin/media/playButton.svg); + background-repeat: no-repeat; + background-position: 54% 50%; + background-size: 40% 40%; + background-color: #1a1a1a; + -moz-context-properties: fill; + fill: #fff; + opacity: 0.8; + position: relative; + top: 20px; +} + +.controlsSpacerStack:hover > .clickToPlay, +.clickToPlay:hover { + opacity: 0.55; +} + +.controlsSpacerStack:hover > .clickToPlay[fadeout] { + opacity: 0; +} + +.controlBar[fullscreen-unavailable] .fullscreenButton { + display: none; +} + +.statusOverlay[fadeout], +.statusOverlay[error] + .controlsOverlay > .controlsSpacerStack { + opacity: 0; +} + +.pictureInPictureOverlay { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + opacity: 1; + background-color: rgb(12, 12, 13); + color: #fff; +} + +/* Status description formatting */ +.statusLabel { + padding: 0 10px; + text-align: center; + font: message-box; + font-size: 14px; +} + +.statusLabel { + display: none; +} + +[status="errorAborted"] > #errorAborted, +[status="errorNetwork"] > #errorNetwork, +[status="errorDecode"] > #errorDecode, +[status="errorSrcNotSupported"] > #errorSrcNotSupported, +[status="errorNoSource"] > #errorNoSource, +[status="errorGeneric"] > #errorGeneric, +[status="pictureInPicture"] > #pictureInPicture { + display: inline; +} + +%ifdef XP_WIN +@media (-moz-windows-default-theme: 0) { + .controlsSpacer, + .clickToPlay { + background-color: transparent; + } +} +%endif + +.pip-wrapper { + position: absolute; + cursor: pointer; + -moz-appearance: none; + background: none; + border: none; + text-align: unset; + top: calc(70% - 40px); + opacity: 0; + transition: opacity 200ms; + --pip-icon-size: 24px; + --pip-icon-width-with-margins: calc(2 * var(--pip-toggle-margin) + var(--pip-icon-size)); + --pip-highlight-width: 2px; + --pip-toggle-margin: 8px; + --pip-highlight-style: solid rgba(0, 254, 255, 1); +} + +.pip-wrapper[policy="hidden"] { + display: none; +} + +.pip-wrapper[medium-video] > .pip-expanded > .pip-icon-label > .pip-label { + font-size: 13px; +} + +.pip-wrapper[medium-video] > .pip-expanded { + font-size: 11px; +} + +.controlsOverlay.hovering > .pip-wrapper { + opacity: 0.8; +} + +.controlsOverlay[hidetoggle="true"].hovering > .pip-wrapper:not(.hovering) { + opacity: 0; +} + +.controlsOverlay.hovering > .pip-wrapper.hovering { + opacity: 1; +} + +.pip-wrapper[position="right"] { + right: 40px; +} + +.pip-wrapper[position="left"] { + left: 12px; +} + +.pip-expanded, +.pip-small, +.pip-icon, +.pip-explainer { + position: absolute; + left: 0; + top: 0; +} + +.pip-icon { + top: 8px; + left: 8px; + pointer-events: none; + background-image: url("chrome://global/skin/media/pictureinpicture.svg"); + background-size: var(--pip-icon-size) var(--pip-icon-size); + -moz-context-properties: fill; + fill: #fff; + height: var(--pip-icon-size); + width: var(--pip-icon-size); + background-repeat: no-repeat; + background-position: center, center; +} + +.videocontrols[localedir="rtl"] .pip-icon { + transform: scaleX(-1); +} + +.pip-wrapper[position="left"] > .pip-expanded > .pip-icon-label > .pip-label { + margin-left: var(--pip-icon-width-with-margins); + margin-right: var(--pip-toggle-margin); +} + +.pip-expanded, +.pip-explainer { + user-select: none; +} + +.pip-small { + background-color: rgba(12,12,13,0.65); + box-shadow: 0px 4px 4px rgba(12,12,13,0.25); + width: 40px; + height: 40px; + border-radius: 25px; +} + +.a11y-only { + position: absolute; + left: -10000px; + width: 100px; + height: 100px; +} + +.pip-wrapper[position="left"] > .pip-expanded > .pip-icon-label > .pip-icon { + display: none; +} + +.pip-expanded, +.pip-small { + border: 1px solid rgba(255,255,255,0.1); + box-sizing: border-box; +} + +.pip-wrapper:not([has-used]) > .pip-small { + border: var(--pip-highlight-width) var(--pip-highlight-style); +} + +.pip-expanded { + border: var(--pip-highlight-width) var(--pip-highlight-style); + transition: opacity 250ms, scale 200ms, translate 190ms; + justify-content: left; + display: flex; + height: 40px; + background-color: rgba(12,12,13,0.9); + box-shadow: 0px 4px 4px rgba(12,12,13,0.25); + width: max-content; + border-radius: 8px; + opacity: 0; + color: #fff; + align-items: center; + scale: 0.33 1; + font-size: 14px; +} + +.pip-wrapper[position="right"] > .pip-expanded { + translate: calc(-100% + 48px); + transform-origin: right; + justify-content: right; +} + +.pip-wrapper:is([small-video],[has-used]) > .pip-expanded, +.pip-wrapper[position="right"]:not([small-video],[has-used]) > .pip-icon { + display: none; +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon { + position: relative; + top: 0; + left: 0; + display: inline-block; +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label { + display: flex; + flex-direction: row; + align-content: center; +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon, +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-label { + margin-top: auto; + margin-bottom: auto; +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon { + margin-left: var(--pip-toggle-margin); + margin-right: var(--pip-toggle-margin); +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-label { + margin-right: var(--pip-toggle-margin); +} + +.pip-wrapper.hovering > .pip-expanded { + box-shadow: none; + border: var(--pip-highlight-width) var(--pip-highlight-style); + /* Remove bottom border but keep text centred with padding. */ + border-bottom: none; + padding-bottom: var(--pip-highlight-width); + pointer-events: none; +} + +.pip-wrapper:not([small-video],[has-used]) > .pip-expanded { + opacity: 1; + scale: 1; + pointer-events: auto; +} + +.pip-wrapper:not([small-video],[has-used]).hovering > .pip-expanded { + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; +} + +.pip-wrapper:not([small-video],[has-used]) > .pip-small { + opacity: 0; + transition: opacity 200ms; +} + +.pip-explainer { + opacity: 0; +} + +.pip-explainer { + padding: 6px 16px 8px 8px; + translate: 0; + transition: opacity 250ms, translate 190ms; + transition-timing-function: cubic-bezier(.07,.95,0,1); + background: rgba(12,12,13,0.65); + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + border: var(--pip-highlight-width) var(--pip-highlight-style); + border-top: 0; + box-shadow: 0px 4px 4px rgba(12,12,13,0.25); + opacity: 0; + margin-left: calc(-1 * var(--pip-highlight-width)); + margin-right: calc(-1 * var(--pip-highlight-width)); + width: calc(100% - 24px); + word-break: break-word; + pointer-events: none; +} + +.videocontrols[localedir="rtl"] .pip-explainer { + text-align: right; + direction: rtl; +} + +.pip-wrapper.hovering > .pip-expanded > .pip-explainer { + pointer-events: auto; +} + +.pip-wrapper.hovering > .pip-expanded > .pip-explainer { + opacity: 1; +} + +.pip-wrapper.hovering > .pip-expanded > .pip-explainer { + translate: 0 calc(40px - var(--pip-highlight-width)); +} + +@media (prefers-reduced-motion) { + .pip-wrapper, + .pip-expanded, + .pip-wrapper:not([small-video],[has-used]) > .pip-small, + .pip-explainer { + transition: none; + } +} diff --git a/toolkit/themes/shared/menu-scrolling.inc.css b/toolkit/themes/shared/menu-scrolling.inc.css new file mode 100644 index 0000000000..9c1050b9e6 --- /dev/null +++ b/toolkit/themes/shared/menu-scrolling.inc.css @@ -0,0 +1,34 @@ +% 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/. + +/* Scroll buttons */ + +/* Hide arrow buttons when there's nothing to scroll in that direction */ +.menupopup-arrowscrollbox[scrolledtostart="true"]::part(scrollbutton-up), +.menupopup-arrowscrollbox[scrolledtoend="true"]::part(scrollbutton-down) { + visibility: collapse; +} + +/* Prevent the scrolled contents of the menupopup from jumping vertically when + * the arrow buttons appear / disappear, by positioning ::part(scrollbox) in + * such a way that its edges are at the same position as the edges of + * arrowscrollbox regardless of scroll button visibility. + */ +.menupopup-arrowscrollbox:not([scrolledtostart="true"])::part(scrollbox) { + /* scrollbutton-up is visible; shift our top edge up by its height. */ + margin-top: -16px; +} + +.menupopup-arrowscrollbox:not([scrolledtoend="true"])::part(scrollbox) { + /* scrollbutton-down is visible; shift our bottom edge down by its height. */ + margin-bottom: -16px; +} + +.menupopup-arrowscrollbox::part(scrollbox-clip) { + /* In the space where the arrow buttons overlap the scrollbox, clip away the + * scrollbox so that nothing is shown behind the arrow button even if the + * button is transparent. + */ + overflow: hidden; +} diff --git a/toolkit/themes/shared/mozapps.inc.mn b/toolkit/themes/shared/mozapps.inc.mn new file mode 100644 index 0000000000..4f9d6ab79e --- /dev/null +++ b/toolkit/themes/shared/mozapps.inc.mn @@ -0,0 +1,33 @@ +# 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/. + +# This is not a complete / proper jar manifest. It is included by the +# actual theme-specific manifests, so that shared resources need only +# be specified once. As a result, the source file paths are relative +# to the location of the actual manifest. + + skin/classic/mozapps/extensions/dictionaryGeneric.svg (../../shared/extensions/category-dictionaries.svg) + skin/classic/mozapps/extensions/extensionGeneric.svg (../../shared/extensions/category-extensions.svg) + skin/classic/mozapps/extensions/themeGeneric.svg (../../shared/extensions/category-themes.svg) + skin/classic/mozapps/extensions/category-discover.svg (../../shared/extensions/category-discover.svg) + skin/classic/mozapps/extensions/category-recent.svg (../../shared/extensions/category-recent.svg) + skin/classic/mozapps/extensions/category-available.svg (../../shared/extensions/category-available.svg) + skin/classic/mozapps/extensions/extension.svg (../../shared/extensions/extension.svg) + skin/classic/mozapps/extensions/recommended.svg (../../shared/extensions/recommended.svg) + skin/classic/mozapps/extensions/line.svg (../../shared/extensions/line.svg) +#ifndef ANDROID + skin/classic/mozapps/extensions/rating-star.svg (../../shared/extensions/rating-star.svg) +#endif +#ifndef ANDROID + skin/classic/mozapps/aboutProfiles.css (../../shared/aboutProfiles.css) +#endif + skin/classic/mozapps/aboutServiceWorkers.css (../../shared/aboutServiceWorkers.css) + skin/classic/mozapps/profile/profileDowngrade.css (../../shared/profile/profileDowngrade.css) + skin/classic/mozapps/profile/information.svg (../../shared/profile/information.svg) + +% override chrome://mozapps/skin/extensions/category-extensions.svg chrome://mozapps/skin/extensions/extensionGeneric.svg +% override chrome://mozapps/skin/extensions/category-languages.svg chrome://mozapps/skin/extensions/localeGeneric.svg +% override chrome://mozapps/skin/extensions/category-themes.svg chrome://mozapps/skin/extensions/themeGeneric.svg +% override chrome://mozapps/skin/extensions/category-dictionaries.svg chrome://mozapps/skin/extensions/dictionaryGeneric.svg +% override chrome://mozapps/skin/extensions/localeGeneric.svg chrome://mozapps/skin/extensions/dictionaryGeneric.svg diff --git a/toolkit/themes/shared/narrate.css b/toolkit/themes/shared/narrate.css new file mode 100644 index 0000000000..fa23670fd9 --- /dev/null +++ b/toolkit/themes/shared/narrate.css @@ -0,0 +1,263 @@ +/* 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/. */ + +/* Avoid adding ID selector rules in this style sheet, since they could + * inadvertently match elements in the article content. */ +:root { + --blue-60: #0060df; +} +.narrating { + position: relative; + z-index: 1; +} + +body.light .narrating { + background-color: #ffc; +} + +body.sepia .narrating { + background-color: #e0d7c5; +} + +body.dark .narrating { + background-color: #242424; +} + +.narrate-word-highlight { + position: absolute; + display: none; + transform: translate(-50%, calc(-50% - 2px)); + z-index: -1; + border-bottom-style: solid; + border-bottom-width: 7px; + transition: left 0.1s ease, width 0.1s ease; +} + +.narrating > .narrate-word-highlight { + display: inline-block; +} + +.narrate-word-highlight.newline { + transition: none; +} + +body.light .narrate-word-highlight { + border-bottom-color: #ffe087; +} + +body.sepia .narrate-word-highlight { + border-bottom-color: #bdb5a5; +} + +body.dark .narrate-word-highlight { + border-bottom-color: #6f6f6f; +} + +.narrate-dropdown { + --border-color: #e5e5e5; + --current-voice: #7f7f7f; +} +.dark .narrate-dropdown { + --border-color: #65646a; + --current-voice: #a09eac; +} + +.narrate-toggle { + background-image: url("chrome://global/skin/narrate/headphone.svg"); +} + +.speaking .narrate-toggle { + /* This shows with an animation. */ + background-image: url("chrome://global/skin/narrate/headphone-active.svg"); +} + +.narrate-dropdown > .dropdown-popup button { + background-color: transparent; +} + +.narrate-dropdown > .dropdown-popup button:enabled:hover, +.narrate-dropdown > .dropdown-popup button:enabled:focus { + background-color: var(--popup-button-hover); +} + +.narrate-dropdown > .dropdown-popup { + top: -34px; +} + +.narrate-dropdown .dropdown-arrow { + top: 40px; +} + +.narrate-row { + display: flex; + align-items: center; + min-height: 40px; + box-sizing: border-box; +} + +.narrate-row:not(.narrate-voices) { + direction: ltr; +} + +.narrate-row:not(:first-child) { + border-top: 1px solid var(--border-color); +} + +/* Control buttons */ + +.narrate-control > button { + background-size: 24px 24px; + background-repeat: no-repeat; + background-position: center center; + height: 64px; + width: 82px; + border: none; + color: #666; + box-sizing: border-box; +} + +.narrate-control > button:not(:first-child) { + border-inline-start: 1px solid var(--popup-line); +} + +.narrate-skip-previous { + border-top-left-radius: 3px; + background-image: url("chrome://global/skin/narrate/back.svg"); +} + +.narrate-skip-next { + border-top-right-radius: 3px; + background-image: url("chrome://global/skin/narrate/forward.svg"); +} + +.narrate-start-stop { + background-image: url("chrome://global/skin/narrate/start.svg"); +} + +.narrate-dropdown.speaking .narrate-start-stop { + background-image: url("chrome://global/skin/narrate/stop.svg"); +} + +/* Rate control */ + +.narrate-rate::before, .narrate-rate::after { + content: ''; + width: 48px; + height: 40px; + background-position: center; + background-repeat: no-repeat; + background-size: 24px auto; + -moz-context-properties: fill; + fill: var(--icon-fill); +} + +.narrate-rate::before { + background-image: url("chrome://global/skin/narrate/slow.svg"); +} + +.narrate-rate::after { + background-image: url("chrome://global/skin/narrate/fast.svg"); +} + +.narrate-rate-input { + margin: 0 1px; + flex-grow: 1; + background-color: var(--popup-bgcolor); + width: 148px; +} + +.narrate-rate-input::-moz-range-track { + background-color: var(--icon-fill); + height: 2px; +} + +.narrate-rate-input::-moz-range-progress { + background-color: var(--active-color); + height: 2px; +} + +.narrate-rate-input::-moz-range-thumb { + background-color: var(--icon-fill); + height: 16px; + width: 16px; + border-radius: 8px; + border-width: 0; +} + +.narrate-rate-input:active::-moz-range-thumb { + background-color: var(--blue-60); +} + +/* Voice selection */ + +.voiceselect { + width: 246px; +} + +.voiceselect > button.select-toggle, +.voiceselect > .options > button.option { + appearance: none; + border: none; + width: 100%; + min-height: 40px; +} + +.voiceselect.open > button.select-toggle { + border-bottom: 1px solid var(--border-color); +} + +.voiceselect > button.select-toggle::after { + content: ''; + background-image: url("chrome://global/skin/narrate/arrow.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: 12px 12px; + display: inline-block; + width: 1.5em; + height: 1em; + vertical-align: middle; +} + +.voiceselect > .options > button.option:not(:first-child) { + border-top: 1px solid var(--border-color); +} + +.voiceselect > .options > button.option { + box-sizing: border-box; +} + +.voiceselect > .options:not(.hovering) > button.option:focus { + background-color: #eaeaea; +} + +body.dark .voiceselect > .options:not(.hovering) > button.option:focus { + background-color: var(--popup-button-hover); +} + +.voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) { + background-color: transparent; +} + +.voiceselect > .options > button.option::-moz-focus-inner { + outline: none; + border: 0; +} + +.voiceselect > .options { + display: none; + overflow-y: auto; +} + +.voiceselect.open > .options { + display: block; +} + +.current-voice { + color: var(--current-voice); +} + +.voiceselect:not(.open) > button, +.voiceselect .option:last-child { + border-radius: 0 0 3px 3px; +} diff --git a/toolkit/themes/shared/narrate/arrow.svg b/toolkit/themes/shared/narrate/arrow.svg new file mode 100644 index 0000000000..e47a85775b --- /dev/null +++ b/toolkit/themes/shared/narrate/arrow.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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12"> + <path fill="context-fill" d="M6 9L1 4l1-1 4 4 4-4 1 1z"/> +</svg> diff --git a/toolkit/themes/shared/narrate/back.svg b/toolkit/themes/shared/narrate/back.svg new file mode 100644 index 0000000000..7b5b1ebea9 --- /dev/null +++ b/toolkit/themes/shared/narrate/back.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" viewBox="0 0 24 24"> + <path fill="context-fill" d="M 5 0 C 4.446 0 4 0.446 4 1 L 4 23 C 4 23.554 4.446 24 5 24 L 7 24 C 7.554 24 8 23.554 8 23 L 8 12.404297 C 8.04108 12.509297 8.109944 12.610125 8.203125 12.703125 L 19.296875 23.775391 C 19.495259 23.972391 19.661613 24.039562 19.796875 23.976562 C 19.932137 23.915564 20 23.748516 20 23.478516 L 20 0.52148438 C 20 0.25248437 19.93214 0.084484365 19.796875 0.021484375 C 19.661613 -0.040515625 19.495259 0.02856248 19.296875 0.2265625 L 8.203125 11.298828 C 8.1099445 11.381828 8.04108 11.481703 8 11.595703 L 8 1 C 8 0.446 7.554 0 7 0 L 5 0 z"/> +</svg> diff --git a/toolkit/themes/shared/narrate/fast.svg b/toolkit/themes/shared/narrate/fast.svg new file mode 100644 index 0000000000..61a45a7c9b --- /dev/null +++ b/toolkit/themes/shared/narrate/fast.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 id="Icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20.4"> + <path fill="context-fill" d="M14.42 16.68a.77.77 0 0 0 .54.7l2.51.68a1.58 1.58 0 0 1 1.06 1.22l.05.39-3.89-.53a4.34 4.34 0 0 1-1.74-.72L7.2 14.03a5.79 5.79 0 0 1-5.34-4.88h-.82a1 1 0 0 1-1-1l2.9-3.24a6.16 6.16 0 0 1 4.7-2.39 5.88 5.88 0 0 1 .77.05 5 5 0 0 1 .87.15c3.75 1 6.5 5.84 6.5 5.84a2.27 2.27 0 0 0 1.14.85h.17a1.27 1.27 0 0 0 1.22-.4l.78-1-2.47-1.2c-3.38-1.46-2.46-5.71-2.46-5.71 0-.26.23-.32.42-.14l5.32 5-4.31-4.81a1.39 1.39 0 0 1 .81-1.22l4.17 6.65.33.31 2.19 1.54a2.44 2.44 0 0 1 .92 1.75v2.77l-.16.13a1.66 1.66 0 0 1-1.63.19l-.75-.36a2.57 2.57 0 0 0-2.55.32l-2.18 1.82a4.28 4.28 0 0 1-.89.55 10.18 10.18 0 0 0-4.62-8.46c-.27-.16-.66.31-.47.48a10.52 10.52 0 0 1 3.68 8.5v.48zm8.38-5.42a.49.49 0 1 0-.49-.49.49.49 0 0 0 .49.49zm-18 9.14v-.52a1.39 1.39 0 0 1 .93-1.25s2.7-.66 3.43-1.84l2.06 1.63a25.62 25.62 0 0 1-6.43 2z"/> +</svg> diff --git a/toolkit/themes/shared/narrate/forward.svg b/toolkit/themes/shared/narrate/forward.svg new file mode 100644 index 0000000000..2a90ddd9c6 --- /dev/null +++ b/toolkit/themes/shared/narrate/forward.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" viewBox="0 0 24 24"> + <path fill="context-fill" d="m 19,0 c 0.554,0 1,0.446 1,1 l 0,22 c 0,0.554 -0.446,1 -1,1 l -2,0 c -0.554,0 -1,-0.446 -1,-1 l 0,-10.595703 c -0.04108,0.105 -0.109944,0.205828 -0.203125,0.298828 L 4.703125,23.775391 c -0.198384,0.197 -0.364738,0.264171 -0.5,0.201171 C 4.067863,23.915564 4,23.748516 4,23.478516 L 4,0.52148438 c 0,-0.26900001 0.06786,-0.43700001 0.203125,-0.5 0.135262,-0.062 0.301616,0.0070781 0.5,0.20507812 l 11.09375,11.0722655 c 0.09318,0.083 0.162045,0.182875 0.203125,0.296875 L 16,1 c 0,-0.554 0.446,-1 1,-1 l 2,0 z"/> +</svg> diff --git a/toolkit/themes/shared/narrate/headphone-active.svg b/toolkit/themes/shared/narrate/headphone-active.svg new file mode 100644 index 0000000000..80c15d8ea7 --- /dev/null +++ b/toolkit/themes/shared/narrate/headphone-active.svg @@ -0,0 +1,22 @@ +<!-- 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" height="16" width="16" fill="#0a83ff"> + <style> + @keyframes wavy { + from { + translate: 0; + } + to { + translate: -17.415px; + } + } + </style> + <clipPath id="clip"> + <rect width="10" height="16" x="3" y="0"/> + </clipPath> + <path d="M14.486 8.65V7.56a6.487 6.487 0 00-12.972 0v1.093A2.076 2.076 0 000 10.643v2.206c0 1.147.93 2.077 2.076 2.077h1.41a.567.567 0 00.566-.567V9.133a.566.566 0 00-.566-.566h-.84V7.56a5.354 5.354 0 1110.708 0v1.007h-.84a.567.567 0 00-.568.566v5.226c0 .313.254.567.568.567h1.408c1.148 0 2.078-.93 2.078-2.077v-2.207a2.078 2.078 0 00-1.514-1.991z"/> + <g clip-path="url(#clip)"> + <path style="animation: wavy 2s infinite linear" d="M13.193 8.818a1.35 1.35 0 00-.838.293 1.747 1.747 0 00-.47.641c-.216.464-.314.979-.426 1.46-.113.485-.24.931-.4 1.194-.161.263-.257.352-.582.352-.252 0-.315-.05-.434-.194-.12-.142-.244-.41-.38-.726-.139-.317-.29-.687-.59-1.014a1.83 1.83 0 00-1.346-.57c-.576 0-1.036.377-1.282.775-.246.4-.378.84-.517 1.246-.14.406-.285.774-.442.989-.157.215-.25.289-.523.289-.111 0-.138-.017-.192-.065a.885.885 0 01-.197-.324c-.136-.34-.226-.906-.32-1.5A9.493 9.493 0 004 10.447v3.815c.016.016.026.035.043.05.238.21.574.34.92.34.614 0 1.119-.338 1.414-.742.293-.403.449-.86.592-1.28.144-.417.276-.802.412-1.023.136-.22.174-.253.346-.253.304 0 .404.07.535.212.13.143.26.4.392.707.134.31.272.67.545.997.273.327.737.587 1.278.587.683 0 1.23-.403 1.52-.878.29-.476.417-1.014.534-1.516.116-.502.222-.973.35-1.248a.737.737 0 01.172-.252c.043-.035.054-.045.138-.045.307 0 .412.103.596.457.183.354.326.927.467 1.531.142.605.281 1.241.576 1.793.294.552.86 1.045 1.602 1.045.842 0 1.46-.54 1.74-1.13.268-.565.325-1.168.33-1.663a.55.55 0 000-.002.55.55 0 00.006-.076c0-.403.073-.96.258-1.342.185-.38.374-.582.873-.582.333 0 .416.093.576.424.16.331.27.88.361 1.463.092.582.171 1.194.385 1.734.108.27.251.533.488.742.238.21.574.34.92.34.614 0 1.121-.338 1.416-.742.294-.403.448-.86.592-1.28.143-.417.276-.802.412-1.023.136-.22.174-.254.346-.254.304 0 .404.071.535.213.132.143.26.4.393.707.134.31.271.67.544.996.273.327.737.588 1.278.588.666 0 1.2-.385 1.496-.845V9.596c-.03.052-.063.103-.088.156-.216.464-.312.979-.424 1.46-.113.485-.241.931-.402 1.194-.16.263-.257.352-.582.352-.252 0-.315-.05-.434-.194-.12-.142-.243-.41-.38-.726-.138-.317-.291-.687-.59-1.014a1.83 1.83 0 00-1.346-.57c-.576 0-1.036.377-1.281.775-.247.4-.38.84-.518 1.246-.14.406-.282.774-.44.989-.156.215-.253.289-.525.289-.112 0-.137-.017-.191-.065a.885.885 0 01-.198-.324c-.136-.34-.226-.906-.32-1.5-.095-.594-.19-1.218-.457-1.77-.267-.55-.83-1.044-1.566-1.044-.905 0-1.558.576-1.862 1.203-.29.597-.357 1.235-.363 1.738a.55.55 0 000 .004.55.55 0 00-.006.078c0 .41-.066.926-.228 1.268-.162.34-.307.504-.748.504-.327 0-.443-.11-.631-.463-.19-.353-.336-.924-.477-1.526-.14-.602-.276-1.237-.56-1.787-.285-.55-.839-1.05-1.57-1.05z"/> + </g> +</svg> diff --git a/toolkit/themes/shared/narrate/headphone.svg b/toolkit/themes/shared/narrate/headphone.svg new file mode 100644 index 0000000000..d065061ab3 --- /dev/null +++ b/toolkit/themes/shared/narrate/headphone.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" height="16" width="16" fill="context-fill"> + <path d="M14.486 8.65V7.56a6.487 6.487 0 00-12.972 0v1.093A2.076 2.076 0 000 10.643v2.206c0 1.147.93 2.077 2.076 2.077h1.41a.567.567 0 00.566-.567V9.133a.566.566 0 00-.566-.566h-.84V7.56a5.354 5.354 0 1110.708 0v1.007h-.84a.567.567 0 00-.568.566v5.226c0 .313.254.567.568.567h1.408c1.148 0 2.078-.93 2.078-2.077v-2.207a2.078 2.078 0 00-1.514-1.991z"/> +</svg> diff --git a/toolkit/themes/shared/narrate/slow.svg b/toolkit/themes/shared/narrate/slow.svg new file mode 100644 index 0000000000..1ef3c7b6b1 --- /dev/null +++ b/toolkit/themes/shared/narrate/slow.svg @@ -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/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <g fill="context-fill"> + <path d="M1.684,13.486c-0.209,0-0.404-0.132-0.474-0.341c-0.528-1.58-0.23-5.767,4.097-7.921 c1.315-0.656,2.589-0.988,3.787-0.988c3.237,0,5.096,2.341,5.99,3.465c0.158,0.199,0.181,0.533,0,0.713 c-0.793,0.794-1.852,1.542-3.231,2.286c-2.46,1.327-5.045,1.775-7.121,2.134c-1.123,0.194-2.093,0.361-2.89,0.627 C1.789,13.479,1.735,13.486,1.684,13.486L1.684,13.486z"/> + <path d="M23.185,5.465c-0.86-1.121-2.074-1.819-3.168-1.819c-0.641,0-1.556,0.23-2.273,1.328 c-0.374,0.571-0.577,1.161-0.773,1.73c-0.512,1.482-1.041,3.016-4.662,4.969c-2.316,1.249-4.707,1.664-6.815,2.03 c-2.524,0.438-4.704,0.814-5.455,2.622c-0.069,0.165-0.045,0.354,0.062,0.495c0.107,0.143,0.281,0.217,0.46,0.193 c0.667-0.081,1.533,0.041,2.434,0.217c-0.122,0.146-0.261,0.286-0.391,0.418c-0.38,0.385-0.774,0.783-0.657,1.292 c0.108,0.474,0.604,0.699,0.966,0.828c0.399,0.142,0.843,0.217,1.283,0.217c1.241,0,2.216-0.579,2.649-1.539 c1.704,0.287,3.487,0.313,5.043,0.313l1.639-0.006c0.066,0.056,0.178,0.166,0.264,0.25c0.504,0.506,1.348,1.351,2.721,1.351 c0.129,0,0.264-0.008,0.416-0.026c0.687-0.102,1.351-0.267,1.574-0.787c0.227-0.528-0.123-1.023-0.526-1.597 c-0.481-0.685-1.08-1.532-0.998-2.652c0.196-0.397,0.368-0.824,0.546-1.267c0.479-1.19,0.975-2.421,2.12-3.513 c0.431,0.343,1.022,0.549,1.63,0.549l0,0c0.439,0,0.876-0.102,1.295-0.3c0.624-0.293,1.104-0.967,1.316-1.847 C24.175,7.707,23.914,6.418,23.185,5.465L23.185,5.465z M20.397,7.757c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5 c0.275,0,0.5,0.224,0.5,0.5S20.674,7.757,20.397,7.757z"/> + </g> +</svg> diff --git a/toolkit/themes/shared/narrate/start.svg b/toolkit/themes/shared/narrate/start.svg new file mode 100644 index 0000000000..0f6680e639 --- /dev/null +++ b/toolkit/themes/shared/narrate/start.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" viewBox="0 0 24 24"> + <path d="M21.64 12.44L2.827 22.895c-.217.123-.403.137-.56.042-.155-.094-.233-.264-.233-.51V1.572c0-.244.08-.414.233-.51.157-.093.343-.08.56.044L21.642 11.56c.217.124.326.27.326.44 0 .17-.11.316-.327.44z" fill="context-fill"/> +</svg> diff --git a/toolkit/themes/shared/narrate/stop.svg b/toolkit/themes/shared/narrate/stop.svg new file mode 100644 index 0000000000..9a57603e84 --- /dev/null +++ b/toolkit/themes/shared/narrate/stop.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" viewBox="0 0 24 24"> + <rect ry="1" rx="1" y="2" x="2" height="20" width="20" fill="context-fill"/> +</svg> diff --git a/toolkit/themes/shared/non-mac.jar.inc.mn b/toolkit/themes/shared/non-mac.jar.inc.mn new file mode 100644 index 0000000000..b5a636dc85 --- /dev/null +++ b/toolkit/themes/shared/non-mac.jar.inc.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/. + +# This is not a complete / proper jar manifest. It is conditionally included +# by the shared jar manifest, which in turn is included by the os-specific +# manifests. +# As a result, the source file paths are relative to the location of the +# actual manifests. + +#include jar.inc.mn + + skin/classic/global/dialog.css (../../windows/global/dialog.css) + skin/classic/global/scrollbars.css (../../windows/global/xulscrollbars.css) + skin/classic/global/tabprompts.css (../../windows/global/tabprompts.css) + skin/classic/global/wizard.css (../../windows/global/wizard.css) + + skin/classic/global/arrow/panelarrow-horizontal.svg (../../windows/global/arrow/panelarrow-horizontal.svg) + skin/classic/global/arrow/panelarrow-vertical.svg (../../windows/global/arrow/panelarrow-vertical.svg) + +* skin/classic/global/dirListing/dirListing.css (../../windows/global/dirListing/dirListing.css) + skin/classic/global/icons/question-64.png (../../windows/global/icons/question-64.png) + skin/classic/global/icons/search-textbox.svg (../../windows/global/icons/search-textbox.svg) + + skin/classic/mozapps/downloads/unknownContentType.css (../../windows/mozapps/downloads/unknownContentType.css) + skin/classic/mozapps/extensions/blocklist.css (../../windows/mozapps/extensions/blocklist.css) + skin/classic/mozapps/handling/handling.css (../../windows/mozapps/handling/handling.css) + skin/classic/mozapps/profile/profileSelection.css (../../windows/mozapps/profile/profileSelection.css) + +% override chrome://mozapps/skin/xpinstall/xpinstallItemGeneric.png chrome://mozapps/skin/extensions/extensionGeneric.svg diff --git a/toolkit/themes/shared/notification-popup.inc.css b/toolkit/themes/shared/notification-popup.inc.css new file mode 100644 index 0000000000..8a73f3a247 --- /dev/null +++ b/toolkit/themes/shared/notification-popup.inc.css @@ -0,0 +1,20 @@ +/* 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/. */ + +.popup-notification-panel::part(arrowcontent) { + /* To keep the rounded borders of the panel, we use overflow: hidden; from the + * panel-no-padding class to ensure the contents are clipped to the border box. + * That causes us to override the "display" property so that the height of the + * contents is computed correctly. */ + display: flex; + /* Make multiple popupnotifications stack vertically. */ + flex-direction: column; +} + +.popup-notification-panel > popupnotification:not([hidden]) { + /* Since the anonymous parent (::part(arrowcontent)) has display: flex, sizing + * computations work better with display: block; than with the XUL default + * display: -moz-box; */ + display: block; +} diff --git a/toolkit/themes/shared/notification.css b/toolkit/themes/shared/notification.css new file mode 100644 index 0000000000..997d7f348e --- /dev/null +++ b/toolkit/themes/shared/notification.css @@ -0,0 +1,184 @@ +/* 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"); + +.notificationbox-stack { + /* Prevent the animation from overlapping the navigation toolbar */ + overflow: clip; +} + +.notificationbox-stack[notificationside="top"] { + /* Create a stacking context for the box-shadow */ + position: relative; + z-index: 1; + box-shadow: 0 3px 10px -7px #000; +} + +notification { + height: 56px; + padding-inline-start: 16px; + background: var(--notification-background); + color: var(--notification-text); + border-color: var(--notification-border); + border-style: solid; + border-width: 1px 0; + text-shadow: none; + font-size: 1.15em; + + --notification-background: Window; + --notification-text: WindowText; + --notification-border: rgba(12, 12, 13, 0.2); + --notification-button-background: rgba(12,12,13,.1); + --notification-button-background-hover: rgba(12,12,13,0.2); + --notification-button-background-active: rgba(12,12,13,0.3); + --notification-button-text: inherit; + --notification-primary-button-background: #0060df; + --notification-primary-button-background-hover: #003eaa; + --notification-primary-button-background-active: #002275; + --notification-primary-button-text: rgb(249, 249, 250); +} + +notification[type="info"]:-moz-lwtheme-brighttext { + --notification-background: #38383d; + --notification-text: rgb(249, 249, 250); + --notification-button-background: rgba(249,249,250,.1); + --notification-button-background-hover: rgba(249,249,250,.2); + --notification-button-background-active: rgba(249,249,250,.3); +} + +notification.animated { + transition: margin-top 300ms var(--animation-easing-function), opacity 300ms var(--animation-easing-function); +} + +.notificationbox-stack[notificationside="top"] > notification { + border-top-style: none; +} + +.notificationbox-stack[notificationside="bottom"] > notification { + border-bottom-style: none; +} + +notification[type="warning"] { + --notification-background: #ffe900; + --notification-text: #0c0c0d; +} + +notification[type="critical"] { + --notification-background: #d70022; + --notification-text: #fff; +} + +notification[type="critical"] > .close-icon:hover { + fill-opacity: .2; +} + +notification[type="critical"] > .close-icon:hover:active { + fill-opacity: .3; +} + +.messageText { + margin-inline-start: 12px !important; + margin-block: 12px; +} + +.messageText > .text-link { + color: inherit !important; + text-decoration: underline; + margin-top: 0; + margin-bottom: 0; + margin-inline-start: 0; + margin-inline-end: 0; +} + +.messageImage { + width: 32px; + height: 32px; + -moz-context-properties: fill; + fill: currentColor; +} + +notification[type="info"] > hbox > .messageImage { + list-style-image: url("chrome://global/skin/icons/help.svg"); +} + +notification[type="warning"] > hbox > .messageImage { + list-style-image: url("chrome://global/skin/icons/warning.svg"); +} + +notification[type="critical"] > hbox > .messageImage { + list-style-image: url("chrome://global/skin/icons/error.svg"); +} + +.messageCloseButton { + margin: 0; + padding: 0; +} + +.messageCloseButton > .toolbarbutton-icon { + padding: 6px; + /* Override width and height from close-icon.css */ + width: 32px !important; + height: 32px !important; + /* Close button needs to be clickable from the edge of the window */ + margin-inline-end: 16px; +} + +.messageCloseButton:-moz-focusring { + /* Override the dotted outline from button.css */ + outline: none; +} + +.messageCloseButton:-moz-focusring > .toolbarbutton-icon { + outline: var(--toolbarbutton-focus-outline, 2px solid currentColor); + -moz-outline-radius: var(--toolbarbutton-border-radius, 4px); +} + +.notification-button { + appearance: none; + border: 1px solid transparent; + border-radius: 2px; + background-color: var(--notification-button-background); + /* Override button.css hover & active styles */ + color: var(--notification-button-text) !important; + padding: 0 8px; + margin: 4px 8px; + height: 32px; +} + +.notification-button[disabled] { + opacity: 0.5; +} + +.notification-button:not([disabled]):hover { + background-color: var(--notification-button-background-hover); +} + +.notification-button:not([disabled]):hover:active { + background-color: var(--notification-button-background-active); +} + +.notification-button:-moz-focusring { + outline: var(--toolbarbutton-focus-outline, 2px solid currentColor); + -moz-outline-radius: var(--toolbarbutton-border-radius, 4px); +} + +.notification-button.primary { + background-color: var(--notification-primary-button-background); + /* Override button.css hover & active styles */ + color: var(--notification-primary-button-text) !important; +} + +.notification-button.primary:-moz-focusring { + outline: 4px solid rgba(0, 96, 223, 0.5); + outline-offset: -1px; +} + +.notification-button.primary:not([disabled]):hover { + background-color: var(--notification-primary-button-background-hover); +} + +.notification-button.primary:not([disabled]):hover:active { + background-color: var(--notification-primary-button-background-active); +} diff --git a/toolkit/themes/shared/numberinput.css b/toolkit/themes/shared/numberinput.css new file mode 100644 index 0000000000..f152d79c3b --- /dev/null +++ b/toolkit/themes/shared/numberinput.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/. */ + +/* ===== numberinput.css ================================================ + == Styles used by the input[type="number"] element. + ======================================================================= */ + +@namespace url("http://www.w3.org/1999/xhtml"); + +input[type="number"] { + text-align: right; +} + +input[type="number"][hidespinbuttons="true"] { + appearance: textfield !important; +} diff --git a/toolkit/themes/shared/pictureinpicture/audio-mute.svg b/toolkit/themes/shared/pictureinpicture/audio-mute.svg new file mode 100644 index 0000000000..0841742553 --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/audio-mute.svg @@ -0,0 +1,4 @@ +<!-- 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" viewBox="0 0 16 16"><g fill="#F9F9FA"><path d="M13 8a2.813 2.813 0 0 0-.465-1.535l-.744.744A1.785 1.785 0 0 1 12 8a2.008 2.008 0 0 1-1.4 1.848.5.5 0 0 0 .343.939A3 3 0 0 0 13 8z"/><path d="M13.273 5.727A3.934 3.934 0 0 1 14 8a3.984 3.984 0 0 1-2.742 3.775.5.5 0 0 0 .316.949A4.985 4.985 0 0 0 15 8a4.93 4.93 0 0 0-1.012-2.988zm-4.603 7.99a.2.2 0 0 0 .33-.152V10l-2.154 2.154zm6.037-12.424a1 1 0 0 0-1.414 0L9 5.586V2.544a.25.25 0 0 0-.413-.19L5.5 5H4.191A2.191 2.191 0 0 0 2 7.191v1.618a2.186 2.186 0 0 0 1.659 2.118l-2.366 2.366a1 1 0 1 0 1.414 1.414l12-12a1 1 0 0 0 0-1.414z"/></g></svg>
\ No newline at end of file diff --git a/toolkit/themes/shared/pictureinpicture/audio.svg b/toolkit/themes/shared/pictureinpicture/audio.svg new file mode 100644 index 0000000000..e53aafd806 --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/audio.svg @@ -0,0 +1,4 @@ +<!-- 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" viewBox="0 0 16 16"><g fill="#F9F9FA" fill-opacity=".8"><path d="M8.587 2.354L5.5 5H4.191A2.191 2.191 0 0 0 2 7.191v1.618A2.191 2.191 0 0 0 4.191 11H5.5l3.17 2.717a.2.2 0 0 0 .33-.152V2.544a.25.25 0 0 0-.413-.19zm2.988.921a.5.5 0 0 0-.316.949 3.97 3.97 0 0 1 0 7.551.5.5 0 0 0 .316.949 4.971 4.971 0 0 0 0-9.449z"/><path d="M13 8a3 3 0 0 0-2.056-2.787.5.5 0 1 0-.343.939A2.008 2.008 0 0 1 12 8a2.008 2.008 0 0 1-1.4 1.848.5.5 0 0 0 .343.939A3 3 0 0 0 13 8z"/></g></svg>
\ No newline at end of file diff --git a/toolkit/themes/shared/pictureinpicture/close-pip.svg b/toolkit/themes/shared/pictureinpicture/close-pip.svg new file mode 100644 index 0000000000..d4bec54f8d --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/close-pip.svg @@ -0,0 +1,5 @@ +<!-- 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" viewBox="0 0 16 16"><path d="M9.061 8l3.47-3.47a.75.75 0 0 0-1.061-1.06L8 6.939 4.53 3.47a.75.75 0 1 0-1.06 1.06L6.939 8 3.47 11.47a.75.75 0 1 0 1.06 1.06L8 9.061l3.47 3.47a.75.75 0 0 0 1.06-1.061z"/></svg> + diff --git a/toolkit/themes/shared/pictureinpicture/pause.svg b/toolkit/themes/shared/pictureinpicture/pause.svg new file mode 100644 index 0000000000..29df0834f7 --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/pause.svg @@ -0,0 +1,4 @@ +<!-- 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" viewBox="0 0 16 16"><g fill="#F9F9FA" fill-rule="evenodd" fill-opacity=".8"><rect x="3" y="3" width="4" height="10" rx=".5"/><rect x="9" y="3" width="4" height="10" rx=".5"/></g></svg> diff --git a/toolkit/themes/shared/pictureinpicture/play.svg b/toolkit/themes/shared/pictureinpicture/play.svg new file mode 100644 index 0000000000..fd76cd1a7b --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/play.svg @@ -0,0 +1,4 @@ +<!-- 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" viewBox="0 0 16 16"><path fill="#F9F9FA" d="M4 3.995c0-.55.386-.754.856-.46l6.288 3.93c.473.295.47.776 0 1.07l-6.288 3.93c-.473.295-.856.08-.856-.46v-8.01z"/></svg> diff --git a/toolkit/themes/shared/pictureinpicture/player.css b/toolkit/themes/shared/pictureinpicture/player.css new file mode 100644 index 0000000000..4d4c798f04 --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/player.css @@ -0,0 +1,150 @@ +/* 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 { + --player-bg-color: #000; + --btn-bg-color: rgba(50,50,50,0.55); + --close-btn-bg-color: rgb(211,216,220); + --resize-margin: 5px; +} + +button::-moz-focus-inner { + border: 0; +} + +body { + margin: 0; + background-color: var(--player-bg-color); +} + +body:fullscreen { + -moz-window-dragging: no-drag; +} + +.player-holder { + display: flex; + flex-direction: column; + height: 100vh; + overflow: hidden; +} + +browser { + flex: 1; +} + +#controls { + height: calc(100% - 2 * var(--resize-margin)); + left: 0; + position: absolute; + top: 0; + width: calc(100% - 2 * var(--resize-margin)); + margin: var(--resize-margin); + -moz-window-dragging: drag; +} + +#controls button { + appearance: none; + border: 0; +} + +#controls[keying] button:-moz-focusring { + outline: 2px solid #fff; + box-shadow: 1px 2px 5px #000; +} + +#controls-bottom { + display: flex; + position: absolute; + bottom: 15px; + justify-content: center; + width: 100%; +} + +.gap { + flex: 0.1; + max-width: 50px; +} + +.control-item { + -moz-window-dragging: no-drag; + background-color: var(--btn-bg-color); + border-radius: 4px; + cursor: pointer; + /** + * Make the button dimensions a square proportional to one + * dimension of the window - in this case, the width dimension, + * since we suspect most videos are wider than they are tall. + */ + height: 10vmax; + width: 10vmax; + max-height: 32px; + max-width: 32px; + min-height: 16px; + min-width: 16px; + transition: opacity 160ms linear; + opacity: 0; + background-repeat: no-repeat; +} + +#controls[keying] .control-item:focus { + border-radius: 0px; +} + +#controls:hover .control-item { + opacity: 0.8; +} + +#controls[keying] .control-item, +#controls[showing] .control-item, +#controls:hover .control-item:hover { + opacity: 1; +} + +#close { + background-color: var(--close-btn-bg-color); + background-image: url("chrome://global/skin/pictureinpicture/close-pip.svg"); + position: absolute; + right: 10px; + top: 10px; +} + +#close[mac="true"] { + right: auto; + left: 10px; +} + +#playpause { + left: 55%; +} + +#controls.playing #playpause { + background-image: url("chrome://global/skin/pictureinpicture/pause.svg"); +} + +#controls:not(.playing) #playpause { + background-image: url("chrome://global/skin/pictureinpicture/play.svg"); +} + +#controls.muted #audio { + background-image: url("chrome://global/skin/pictureinpicture/audio-mute.svg"); +} + +#controls:not(.muted) #audio { + background-image: url("chrome://global/skin/pictureinpicture/audio.svg"); +} + +#unpip { + left: 45%; +} + +#unpip { + background-image: url("chrome://global/skin/pictureinpicture/unpip.svg"); + background-position: 60%; + background-repeat: no-repeat; + background-size: 80%; +} + +#unpip:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} diff --git a/toolkit/themes/shared/pictureinpicture/unpip.svg b/toolkit/themes/shared/pictureinpicture/unpip.svg new file mode 100644 index 0000000000..e92ce189c3 --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/unpip.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="24" height="24" fill="#fff"> + <path d="M18 4.5c1.6545 0 3 1.3455 3 3v5.25c0 .414-.336.75-.75.75s-.75-.336-.75-.75V7.5c0-.82725-.67275-1.5-1.5-1.5H6c-.82725 0-1.5.67275-1.5 1.5v9c0 .82725.67275 1.5 1.5 1.5h8.25c.414 0 .75.336.75.75s-.336.75-.75.75H6c-1.6545 0-3-1.3455-3-3v-9c0-1.6545 1.3455-3 3-3zM19.125 15c.207 0 .375.168.375.375s-.168.375-.375.375h-1.34475l3.1095 3.1095c.147.147.147.384 0 .531-.07275.07275-.16875.1095-.26475.1095-.096 0-.192-.03675-.2655-.1095L17.25 16.28025V17.625c0 .207-.168.375-.375.375s-.375-.168-.375-.375v-2.25c0-.04875.00975-.0975.02925-.14325.0375-.0915.11025-.165.2025-.2025A.365271.365271 0 0116.875 15zM14.25 7.5c.414 0 .75.336.75.75v4.5c0 .414-.336.75-.75.75h-7.5c-.414 0-.75-.336-.75-.75v-4.5c0-.414.336-.75.75-.75z"/> +</svg>
\ No newline at end of file diff --git a/toolkit/themes/shared/places/defaultFavicon.svg b/toolkit/themes/shared/places/defaultFavicon.svg new file mode 100644 index 0000000000..69a0408a60 --- /dev/null +++ b/toolkit/themes/shared/places/defaultFavicon.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="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 0a8 8 0 1 0 8 8 8.009 8.009 0 0 0-8-8zm5.163 4.958h-1.552a7.7 7.7 0 0 0-1.051-2.376 6.03 6.03 0 0 1 2.603 2.376zM14 8a5.963 5.963 0 0 1-.335 1.958h-1.821A12.327 12.327 0 0 0 12 8a12.327 12.327 0 0 0-.156-1.958h1.821A5.963 5.963 0 0 1 14 8zm-6 6c-1.075 0-2.037-1.2-2.567-2.958h5.135C10.037 12.8 9.075 14 8 14zM5.174 9.958a11.084 11.084 0 0 1 0-3.916h5.651A11.114 11.114 0 0 1 11 8a11.114 11.114 0 0 1-.174 1.958zM2 8a5.963 5.963 0 0 1 .335-1.958h1.821a12.361 12.361 0 0 0 0 3.916H2.335A5.963 5.963 0 0 1 2 8zm6-6c1.075 0 2.037 1.2 2.567 2.958H5.433C5.963 3.2 6.925 2 8 2zm-2.56.582a7.7 7.7 0 0 0-1.051 2.376H2.837A6.03 6.03 0 0 1 5.44 2.582zm-2.6 8.46h1.549a7.7 7.7 0 0 0 1.051 2.376 6.03 6.03 0 0 1-2.603-2.376zm7.723 2.376a7.7 7.7 0 0 0 1.051-2.376h1.552a6.03 6.03 0 0 1-2.606 2.376z"/> +</svg> diff --git a/toolkit/themes/shared/plugins/plugin-blocked.svg b/toolkit/themes/shared/plugins/plugin-blocked.svg new file mode 100644 index 0000000000..ac10d17623 --- /dev/null +++ b/toolkit/themes/shared/plugins/plugin-blocked.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="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M3 3h3a1 1 0 0 0 0-2H3a1 1 0 0 0 0 2zm11.707 1.293L5 14h9a1 1 0 0 0 1-1V5a1 1 0 0 0-.293-.707z"/> + <path d="M14.707 1.293a.986.986 0 0 0-1.207-.139A.973.973 0 0 0 13 1h-3a1 1 0 0 0 0 2h1.586l-1 1H2a1 1 0 0 0-1 1v8a.971.971 0 0 0 .154.5.986.986 0 0 0 .139 1.205 1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.412z"/> +</svg> diff --git a/toolkit/themes/shared/plugins/plugin.svg b/toolkit/themes/shared/plugins/plugin.svg new file mode 100644 index 0000000000..f8ec1af353 --- /dev/null +++ b/toolkit/themes/shared/plugins/plugin.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="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <rect x="1" y="4" width="14" height="10" rx="1" ry="1"/> + <path d="M6 1H3a1 1 0 0 0 0 2h3a1 1 0 0 0 0-2zm7 0h-3a1 1 0 0 0 0 2h3a1 1 0 0 0 0-2z"/> +</svg> diff --git a/toolkit/themes/shared/popupnotification.inc.css b/toolkit/themes/shared/popupnotification.inc.css new file mode 100644 index 0000000000..5d389c4d0e --- /dev/null +++ b/toolkit/themes/shared/popupnotification.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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +.popup-notification-header-container, +.popup-notification-footer-container { + display: flex; + max-width: calc(2 * var(--arrowpanel-padding) + 32px + 4px + 25em); +} + +.popup-notification-body-container { + padding: var(--arrowpanel-padding); +} + +.popup-notification-icon { + width: 32px; + height: 32px; + margin-inline-end: var(--arrowpanel-padding); +} + +.popup-notification-body { + width: 25em; +} + +.popup-notification-closebutton { + margin-inline-end: -8px; + margin-top: -8px; +} + +.popup-notification-origin:not([value]), +.popup-notification-learnmore-link:not([href]) { + display: none; +} + +.popup-notification-origin { + margin-bottom: .3em !important; +} + +.popup-notification-hint-text { + opacity: 0.6; + margin-top: .5em !important; +} + +.popup-notification-hint-text:empty { + display: none; +} + +.popup-notification-learnmore-link { + margin-top: .5em !important; +} + +.popup-notification-button-container { + display: flex; +} + +.popup-notification-button-container > toolbarseparator { + appearance: none; + border: 0; + border-left: 1px solid var(--panel-separator-color); + margin: 7px 0 7px; + min-width: 0; +} + +.popup-notification-button-container:hover > toolbarseparator { + margin: 0; +} + +.popup-notification-button { + flex: 1; +} + +.popup-notification-primary-button { + flex: 0 50%; +} + +.popup-notification-secondary-button[hidden="true"] ~ .popup-notification-primary-button { + flex: 1; +} + +.popup-notification-dropmarker { + flex: none; + padding: 0 15px !important; +} + +.popup-notification-dropmarker > .button-box > hbox { + display: none; +} + +.popup-notification-dropmarker > .button-box > .button-menu-dropmarker { + /* This is to override the linux !important */ + appearance: none !important; + display: -moz-box; + padding: 0; + margin: 0; +} + +.popup-notification-dropmarker > .button-box > .button-menu-dropmarker::part(icon) { + width: 16px; + height: 16px; + list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg); + -moz-context-properties: fill; + fill: currentColor; +} + +.popup-notification-warning { + color: #d74345; +} diff --git a/toolkit/themes/shared/profile/information.svg b/toolkit/themes/shared/profile/information.svg new file mode 100644 index 0000000000..f1c4f5e359 --- /dev/null +++ b/toolkit/themes/shared/profile/information.svg @@ -0,0 +1,4 @@ +<!-- 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="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8zM8 2a6 6 0 1 0 6 6 6.006 6.006 0 0 0-6-6z"></path><path fill="context-fill" d="M8 7a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z"></path><circle cx="8" cy="5" r="1.188"></circle></svg>
\ No newline at end of file diff --git a/toolkit/themes/shared/profile/profileDowngrade.css b/toolkit/themes/shared/profile/profileDowngrade.css new file mode 100644 index 0000000000..635a50bf08 --- /dev/null +++ b/toolkit/themes/shared/profile/profileDowngrade.css @@ -0,0 +1,13 @@ +/* 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/. */ + +dialog::part(button-spacer) { + display: none; +} + +#info { + list-style-image: url("chrome://mozapps/skin/profile/information.svg"); + width: 32px; + height: 32px; +} diff --git a/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg new file mode 100644 index 0000000000..6bd81a95e4 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg @@ -0,0 +1,16 @@ +<?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" + width="42" + height="16" + viewBox="0 0 42 16" + fill="context-fill"> + + <path d="M14.5,7 L8.75,1.25 L10,-1.91791433e-15 L18,8 L17.375,8.625 L10,16 L8.75,14.75 L14.5,9 L1.13686838e-13,9 L1.13686838e-13,7 L14.5,7 Z"/> + <path d="M38.5,7 L32.75,1.25 L34,6.58831647e-15 L42,8 L41.375,8.625 L34,16 L32.75,14.75 L38.5,9 L24,9 L24,7 L38.5,7 Z" transform="translate(33.000000, 8.000000) scale(-1, 1) translate(-33.000000, -8.000000)"/> + +</svg> diff --git a/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg b/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg new file mode 100644 index 0000000000..eb82e386b7 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg @@ -0,0 +1,16 @@ +<?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" + width="44" + height="16" + viewBox="0 0 44 16" + fill="context-fill"> + + <path d="M14.5,7 L8.75,1.25 L10,-1.91791433e-15 L18,8 L17.375,8.625 L10,16 L8.75,14.75 L14.5,9 L1.13686838e-13,9 L1.13686838e-13,7 L14.5,7 Z" transform="translate(9.000000, 8.000000) scale(-1, 1) translate(-9.000000, -8.000000)"/> + <path d="M40.5,7 L34.75,1.25 L36,-5.17110888e-16 L44,8 L43.375,8.625 L36,16 L34.75,14.75 L40.5,9 L26,9 L26,7 L40.5,7 Z"/> + +</svg> diff --git a/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg b/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg new file mode 100644 index 0000000000..0f9e4d90e4 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg @@ -0,0 +1,18 @@ +<?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" + width="38" + height="14" + viewBox="0 0 38 14" + fill="context-fill"> + + <rect x="0" y="0" width="28" height="2"/> + <rect x="0" y="6" width="38" height="2"/> + <rect x="0" y="12" width="18" height="2"/> + +</svg> diff --git a/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg b/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg new file mode 100644 index 0000000000..17fb534ced --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg @@ -0,0 +1,17 @@ +<?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" + width="38" + height="24" + viewBox="0 0 38 24" + fill="context-fill"> + + <rect x="0" y="0" width="28" height="2"/> + <rect x="0" y="11" width="38" height="2"/> + <rect x="0" y="22" width="18" height="2"/> + +</svg> diff --git a/toolkit/themes/shared/reader/RM-Minus-24x24.svg b/toolkit/themes/shared/reader/RM-Minus-24x24.svg new file mode 100644 index 0000000000..27f0367223 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Minus-24x24.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" viewBox="0 0 24 24">
+ <path fill="context-fill" d="M0,13.5v-3h24v3H0z"/>
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Plus-24x24.svg b/toolkit/themes/shared/reader/RM-Plus-24x24.svg new file mode 100644 index 0000000000..a8517b5e8d --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Plus-24x24.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" viewBox="0 0 24 24">
+ <path fill="context-fill" d="M24,13.5H13.5V24h-3V13.5H0v-3h10.5V0h3v10.5H24V13.5z"/>
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Sans-Serif.svg b/toolkit/themes/shared/reader/RM-Sans-Serif.svg new file mode 100644 index 0000000000..051855d14a --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Sans-Serif.svg @@ -0,0 +1,13 @@ +<!-- 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="21" + height="13" + fill="context-fill"> + <path d="M 7.276027,7.16854 5.432216,1.80247 3.47265,7.16854 Z M 4.572322,0 H 6.43267 l 4.406957,12.146004 H 9.037157 L 7.805193,8.507991 H 3.001361 L 1.686716,12.146004 H 0 Z"/> + <path + d="m 13.295286,9.789564 q 0,0.64492 0.471288,1.01699 0.471288,0.372069 1.116209,0.372069 0.78548,0 1.521351,-0.363801 1.240232,-0.603579 1.240232,-1.976103 V 7.639828 Q 17.371515,7.813461 16.941568,7.929216 16.511621,8.044971 16.09821,8.09458 L 15.196975,8.210335 Q 14.38669,8.317822 13.981548,8.549332 13.295286,8.937938 13.295286,9.789564 Z m 3.604941,-3.00963 q 0.512629,-0.06614 0.686262,-0.429947 0.09922,-0.198437 0.09922,-0.570507 0,-0.760675 -0.545702,-1.099672 -0.537434,-0.347265 -1.546156,-0.347265 -1.165818,0 -1.653642,0.628384 -0.272851,0.347265 -0.355533,1.033527 h -1.38906 q 0.04134,-1.637106 1.058331,-2.273759 1.025259,-0.64492 2.372977,-0.64492 1.562693,0 2.538342,0.595311 0.967381,0.595311 0.967381,1.85208 v 5.101487 q 0,0.23151 0.09095,0.37207 0.09922,0.140559 0.405142,0.140559 0.09922,0 0.223242,-0.0083 0.124023,-0.01654 0.264583,-0.04134 v 1.099672 q -0.347265,0.09922 -0.529166,0.124024 -0.1819,0.0248 -0.496093,0.0248 -0.768943,0 -1.116208,-0.545702 -0.181901,-0.289387 -0.256315,-0.818553 -0.454752,0.595311 -1.306378,1.033527 -0.851625,0.438215 -1.876884,0.438215 -1.231964,0 -2.017444,-0.744139 -0.777212,-0.752407 -0.777212,-1.876884 0,-1.231964 0.768944,-1.909958 0.768944,-0.677993 2.017444,-0.835089 z M 15.668263,3.075775 Z" + /> +</svg> diff --git a/toolkit/themes/shared/reader/RM-Serif.svg b/toolkit/themes/shared/reader/RM-Serif.svg new file mode 100644 index 0000000000..8cb7fcc715 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Serif.svg @@ -0,0 +1,11 @@ +<!-- 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="21" height="13" fill="context-fill"> + <path + d="M 12.088127,11.897958 H 7.2016131 v -0.587043 q 0.6449206,-0.04134 1.0665998,-0.165364 0.4299469,-0.124023 0.4299469,-0.305924 0,-0.07441 -0.01654,-0.181901 -0.01654,-0.107486 -0.04961,-0.190168 L 7.656365,7.838266 H 3.547063 Q 3.315553,8.417041 3.166726,8.846988 3.026166,9.276935 2.910411,9.640736 2.802924,9.996269 2.761583,10.219511 q -0.04134,0.223242 -0.04134,0.363802 0,0.330728 0.520897,0.512629 0.520898,0.1819 1.174087,0.214973 v 0.587043 H 0 v -0.587043 q 0.214974,-0.01654 0.53743401,-0.09095 0.32246003,-0.08268 0.52916499,-0.214974 0.330729,-0.223241 0.51263,-0.46302 0.1819,-0.248046 0.355533,-0.677993 Q 2.819461,7.656365 3.88606,4.90305 4.95266,2.149735 5.787749,0 h 0.661457 l 3.910865,10.120293 q 0.124023,0.32246 0.281119,0.520897 0.157096,0.198437 0.438215,0.388606 0.190169,0.115755 0.496093,0.198437 0.305924,0.07441 0.512629,0.08268 z M 7.3587101,7.102395 5.5810441,2.554878 3.836451,7.102395 Z" + /> + <path + d="m 20.03388,11.749131 q -0.388606,0.140559 -0.686262,0.223241 -0.289387,0.09095 -0.661457,0.09095 -0.64492,0 -1.033526,-0.297656 -0.380338,-0.305924 -0.487825,-0.884699 H 17.1152 q -0.537434,0.595312 -1.15755,0.909504 -0.611848,0.314192 -1.48001,0.314192 -0.917772,0 -1.513083,-0.562239 -0.587043,-0.562238 -0.587043,-1.471742 0,-0.471288 0.132291,-0.843357 0.132291,-0.37207 0.396874,-0.669726 0.206706,-0.248046 0.545702,-0.438215 0.338997,-0.198437 0.636653,-0.314192 0.372069,-0.14056 1.504814,-0.520897 1.141014,-0.380338 1.537888,-0.595312 V 5.87043 q 0,-0.107487 -0.04961,-0.41341 -0.04134,-0.305924 -0.190169,-0.578775 -0.165364,-0.305924 -0.471288,-0.529166 -0.297656,-0.23151 -0.851626,-0.23151 -0.380338,0 -0.711066,0.132291 -0.322461,0.124024 -0.454752,0.264583 0,0.165365 0.07441,0.487825 0.08268,0.32246 0.08268,0.595311 0,0.289388 -0.264583,0.529166 -0.256315,0.239778 -0.719334,0.239778 -0.413411,0 -0.611848,-0.289387 -0.190169,-0.297656 -0.190169,-0.661458 0,-0.380337 0.264583,-0.727602 0.272851,-0.347265 0.702798,-0.620116 0.372069,-0.23151 0.901235,-0.388606 0.529166,-0.165364 1.033527,-0.165364 0.69453,0 1.207159,0.09922 0.520897,0.09095 0.942576,0.405143 0.421679,0.305923 0.636652,0.835089 0.223242,0.520897 0.223242,1.347719 0,1.182354 -0.02481,2.100126 -0.0248,0.909503 -0.0248,1.992639 0,0.32246 0.107487,0.512629 0.115755,0.190169 0.347265,0.322461 0.124023,0.07441 0.388607,0.08268 0.27285,0.0083 0.553969,0.0083 z M 17.148274,7.383514 q -0.702799,0.206705 -1.231964,0.405143 -0.529166,0.198437 -0.983918,0.496092 -0.41341,0.28112 -0.653188,0.669726 -0.239779,0.380337 -0.239779,0.909503 0,0.686262 0.355534,1.008722 0.363801,0.32246 0.917771,0.32246 0.587043,0 1.033527,-0.281119 0.446483,-0.289387 0.752407,-0.677993 z" + /> +</svg> diff --git a/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg b/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg new file mode 100644 index 0000000000..26807e8468 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg @@ -0,0 +1,7 @@ +<?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" width="24" height="24" viewBox="0 0 24 24">
+ <path fill="context-fill" d="M10.87,18.989h2.144L8.3,3.991H5.724l-4.739,15H3.044l1.115-4.171h5.6ZM4.652,12.91L6.968,5.69l2.294,7.22H4.652ZM22.1,16.515v-5.06c0-2.31-.984-3.713-3.65-3.713a10.236,10.236,0,0,0-3.7.756L15.116,9.9A9.9,9.9,0,0,1,18.1,9.317c1.533,0,1.958.627,1.958,2.223v0.975h-1.35c-3.086,0-4.871,1.125-4.871,3.5a3.217,3.217,0,0,0,3.527,3.338,3.205,3.205,0,0,0,2.945-1.659,2.573,2.573,0,0,0,2.436,1.659l0.441-1.344A1.408,1.408,0,0,1,22.1,16.515ZM17.8,17.9a1.744,1.744,0,0,1-1.911-1.995c0-1.512,1.029-2.111,3.065-2.111h1.1V16.18C19.426,17.334,18.938,17.9,17.8,17.9Z"/>
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg new file mode 100644 index 0000000000..235f186376 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg @@ -0,0 +1,7 @@ +<?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" viewBox="0 0 16 24"> + <polygon points="16.58 0.01 16.57 0 4.58 12 16.57 24 16.58 23.98" fill="context-fill" stroke="context-stroke"/> +</svg> diff --git a/toolkit/themes/shared/reader/close-16.svg b/toolkit/themes/shared/reader/close-16.svg new file mode 100644 index 0000000000..acf8ab98ad --- /dev/null +++ b/toolkit/themes/shared/reader/close-16.svg @@ -0,0 +1,4 @@ +<!-- 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" viewBox="0 0 16 16"><path fill="context-fill" d="M9.061 8l3.47-3.47a.75.75 0 0 0-1.061-1.06L8 6.939 4.53 3.47a.75.75 0 1 0-1.06 1.06L6.939 8 3.47 11.47a.75.75 0 1 0 1.06 1.06L8 9.061l3.47 3.47a.75.75 0 0 0 1.06-1.061z"></path></svg> diff --git a/toolkit/themes/shared/reader/pocket.svg b/toolkit/themes/shared/reader/pocket.svg new file mode 100644 index 0000000000..d186f3c480 --- /dev/null +++ b/toolkit/themes/shared/reader/pocket.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="16" height="16" fill="context-fill"> + <path d="M8 15a8 8 0 0 1-8-8V3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4a8 8 0 0 1-8 8zm3.985-10.032a.99.99 0 0 0-.725.319L7.978 8.57 4.755 5.336A.984.984 0 0 0 4 4.968a1 1 0 0 0-.714 1.7l-.016.011 3.293 3.306.707.707a1 1 0 0 0 1.414 0l.707-.707L12.7 6.679a1 1 0 0 0-.715-1.711z"/> +</svg> diff --git a/toolkit/themes/shared/tree.inc.css b/toolkit/themes/shared/tree.inc.css new file mode 100644 index 0000000000..c41ce1c89e --- /dev/null +++ b/toolkit/themes/shared/tree.inc.css @@ -0,0 +1,222 @@ +/* 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/. */ + +/* ===== tree.css =================================================== + == Styles used by the XUL tree element. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* ::::: tree ::::: */ + +tree { + margin: 0 4px; + background-color: Field; + color: FieldText; + appearance: auto; + -moz-default-appearance: listbox; +} + +/* ::::: tree rows ::::: */ + +treechildren::-moz-tree-row { + border: 1px solid transparent; + min-height: 24px; + height: 1.3em; +} + +treechildren::-moz-tree-row(multicol, odd) { + background-color: -moz-oddtreerow; +} + +%ifdef XP_WIN +@media (-moz-windows-default-theme) { + treechildren::-moz-tree-row(hover) { + background-color: hsla(0,0%,50%,.15); + } +} +%endif + +treechildren::-moz-tree-row(selected) { + background-color: -moz-cellhighlight; +} + +treechildren::-moz-tree-row(selected, focus) { + background-color: Highlight; +} + +treechildren::-moz-tree-row(current, focus) { + border: 1px dotted Highlight; +} + +treechildren::-moz-tree-row(selected, current, focus) { + border: 1px dotted #F3D982; +} + +/* ::::: tree cells ::::: */ + +treechildren::-moz-tree-cell { + padding: 0 2px; +} + +treechildren::-moz-tree-cell-text { + color: inherit; +} + +treechildren::-moz-tree-image(selected), +treechildren::-moz-tree-twisty(selected), +treechildren::-moz-tree-cell-text(selected) { + color: -moz-cellhighlighttext; +} + +treechildren::-moz-tree-image(selected, focus), +treechildren::-moz-tree-twisty(selected, focus), +treechildren::-moz-tree-cell-text(selected, focus) { + color: HighlightText; +} + + +/* ::::: lines connecting cells ::::: */ + +treechildren::-moz-tree-line { + border: 1px dotted ThreeDShadow; +} + +treechildren::-moz-tree-line(selected, focus) { + border: 1px dotted HighlightText; +} + + +/* ::::: tree separator ::::: */ + +treechildren::-moz-tree-separator { + border-top: 1px solid ThreeDShadow; + border-bottom: 1px solid ThreeDHighlight; +} + + +/* ::::: drop feedback ::::: */ + +treechildren::-moz-tree-cell-text(primary, dropOn) { + background-color: Highlight; + color: HighlightText; +} + +treechildren::-moz-tree-drop-feedback { + background-color: Highlight; + width: 50px; + height: 2px; + margin-inline-start: 5px; +} + +/* ::::: tree columns ::::: */ + +treecol, +treecolpicker { + appearance: auto; + -moz-default-appearance: treeheadercell; + -moz-box-align: center; + -moz-box-pack: center; + color: -moz-ColHeaderText; + padding: 0 4px; +} + +treecol:hover, +treecolpicker:hover { + color: -moz-ColHeaderHoverText; +} + +.treecol-image { + padding: 0 1px; +} + +.treecol-text { + margin: 0 !important; +} + +treecol[hideheader="true"] { + appearance: none; +} + +/* ::::: column drag and drop styles ::::: */ + +treecol[dragging="true"] { + color: Graytext; +} + +treechildren::-moz-tree-column(insertbefore) { + border-inline-start: 1px solid ThreeDShadow; +} + +treechildren::-moz-tree-column(insertafter) { + border-inline-end: 1px solid ThreeDShadow; +} + +/* ::::: column picker ::::: */ + +.tree-columnpicker-icon { + list-style-image: url("chrome://global/skin/icons/columnpicker.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +/* ::::: tree icons ::::: */ + +treechildren::-moz-tree-image { + -moz-context-properties: fill; + fill: currentColor; +} + +/* ::::: twisty ::::: */ + +treechildren::-moz-tree-twisty { + padding-top: 1px; + padding-inline: 4px; + width: 12px; /* The image's width is 12 pixels */ + list-style-image: url("chrome://global/skin/icons/twisty-collapsed.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) { + list-style-image: url("chrome://global/skin/icons/twisty-collapsed-rtl.svg"); +} + +treechildren::-moz-tree-twisty(open) { + list-style-image: url("chrome://global/skin/icons/twisty-expanded.svg"); +} + +treechildren::-moz-tree-indentation { + width: 16px; +} + +/* ::::: editable tree ::::: */ + +treechildren::-moz-tree-row(selected, editing) { + background-color: transparent; + border: none; +} + +treechildren::-moz-tree-cell-text(selected, editing) { + color: inherit; +} + +html|input.tree-input { + position: absolute; + top: 0; + left: 0; + appearance: none; + -moz-box-flex: 1; + border: 1px solid Highlight; + margin: 0; + margin-inline-start: -4px; + padding: 1px; + font: inherit; +} + +.scrollbar-topmost { + position: relative; + z-index: 2147483647; +} diff --git a/toolkit/themes/windows/global/alerts/alert.css b/toolkit/themes/windows/global/alerts/alert.css new file mode 100644 index 0000000000..4e3dfe6bd7 --- /dev/null +++ b/toolkit/themes/windows/global/alerts/alert.css @@ -0,0 +1,27 @@ +/* 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/alert.inc.css + +#alertNotification { + appearance: none; + background: transparent; + padding: 10px; +} + +#alertBox { + border: 1px solid ThreeDShadow; + border-radius: 1px; + background-color: -moz-Dialog; + color: -moz-DialogText; + box-shadow: 0 2px 10px rgba(0,0,0,0.59); +} + +@media (-moz-windows-default-theme) { + #alertBox { + border-color: rgba(107,107,107,.3); + background-color: rgba(255,255,255,.9); + color: rgba(0,0,0,.9); + } +} diff --git a/toolkit/themes/windows/global/arrow/arrow-up.gif b/toolkit/themes/windows/global/arrow/arrow-up.gif Binary files differnew file mode 100644 index 0000000000..b7a3f32285 --- /dev/null +++ b/toolkit/themes/windows/global/arrow/arrow-up.gif diff --git a/toolkit/themes/windows/global/arrow/panelarrow-horizontal.svg b/toolkit/themes/windows/global/arrow/panelarrow-horizontal.svg new file mode 100644 index 0000000000..d8a288e60a --- /dev/null +++ b/toolkit/themes/windows/global/arrow/panelarrow-horizontal.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="10" height="20"> + <path d="M 10,0 L 0,10 10,20 z" fill="context-stroke"/> + <path d="M 10,1 L 1,10 10,19 z" fill="context-fill"/> +</svg> diff --git a/toolkit/themes/windows/global/arrow/panelarrow-vertical.svg b/toolkit/themes/windows/global/arrow/panelarrow-vertical.svg new file mode 100644 index 0000000000..50fe6b63b4 --- /dev/null +++ b/toolkit/themes/windows/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="20" height="10"> + <path d="M 0,10 L 10,0 20,10 z" fill="context-stroke"/> + <path d="M 1,10 L 10,1 19,10 z" fill="context-fill"/> +</svg> diff --git a/toolkit/themes/windows/global/autocomplete.css b/toolkit/themes/windows/global/autocomplete.css new file mode 100644 index 0000000000..743644c745 --- /dev/null +++ b/toolkit/themes/windows/global/autocomplete.css @@ -0,0 +1,89 @@ +/* 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/. */ + +/* ===== autocomplete.css ================================================= + == Styles used by the autocomplete widget. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* ::::: autocomplete ::::: */ + +html|input[nomatch="true"][highlightnonmatches="true"] { + color: red; +} + +/* ::::: autocomplete popups ::::: */ + +panel[type="autocomplete-richlistbox"] { + appearance: none; + padding: 0; + color: FieldText; + background-color: Field; +} + +/* ::::: richlistbox autocomplete ::::: */ + +.autocomplete-richlistbox { + appearance: none; + margin: 0; +} + +.autocomplete-richlistitem[selected] { + background-color: Highlight; + color: HighlightText; +} + +.ac-type-icon { + display: none; + width: 16px; + height: 16px; + max-width: 16px; + max-height: 16px; + margin-inline-start: 6px; + margin-inline-end: 6px; +} + +.ac-site-icon { + display: none; + width: 16px; + height: 16px; + max-width: 16px; + max-height: 16px; + margin-inline-start: 6px; + margin-inline-end: 8px; + list-style-image: url("chrome://mozapps/skin/places/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/windows/global/button.css b/toolkit/themes/windows/global/button.css new file mode 100644 index 0000000000..e33f0d7faa --- /dev/null +++ b/toolkit/themes/windows/global/button.css @@ -0,0 +1,95 @@ +/* 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/. */ + +/* ===== button.css ===================================================== + == Styles used by the XUL button element. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* :::::::::: button :::::::::: */ + +button { + margin: 1px 5px 2px; + min-width: 6.3em; + color: ButtonText; + text-shadow: none; +} + +.button-box { + padding-block: 2px 3px; + padding-inline: 4px 5px; +} + +.button-text { + margin: 0; + text-align: center; +} + +/* .......... focused state .......... */ + +button:-moz-focusring { + outline: 1px dotted; + outline-offset: -3px; +} + +/* .......... default/hover/focused state .......... */ + +@media (-moz-windows-default-theme: 0) { + @media (-moz-windows-compositor) { + /* This is for high-contrast black and white themes on Windows 8 and later, + where the native appearance renders a different background (which + appears to be equivalent to the Highlight color) if the button is in the + default, hovered or focused state. However, if these states overlap with + the active, disabled, open or checked state, the appearance reverts back + to the default background. */ + button:is([default="true"],:hover,:focus):not(:active,[disabled="true"],[open="true"],[checked="true"]) { + color: HighlightText; + } + } +} + +/* .......... disabled state .......... */ + +button[disabled="true"] { + color: GrayText; +} + +@media (-moz-windows-classic) { + button[disabled="true"] { + color: ThreeDShadow; + text-shadow: 1px 1px ThreeDHighlight; + } +} + +/* ::::: menu buttons ::::: */ + +.button-menu-dropmarker { + appearance: none; + list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg"); + -moz-context-properties: fill; + fill: currentColor; + width: 12px; + height: 12px; +} + +/* ::::: plain buttons ::::: */ + +button.plain { + margin: 0 !important; + padding: 0 !important; +} + +button[type="disclosure"] { + margin: 0; + appearance: none; + list-style-image: url("chrome://global/skin/icons/twisty-collapsed.svg"); + -moz-context-properties: fill; + fill: currentColor; + min-width: 0; +} + +button[type="disclosure"][open="true"] { + list-style-image: url("chrome://global/skin/icons/twisty-expanded.svg"); +} diff --git a/toolkit/themes/windows/global/checkbox.css b/toolkit/themes/windows/global/checkbox.css new file mode 100644 index 0000000000..7bc2ca3af9 --- /dev/null +++ b/toolkit/themes/windows/global/checkbox.css @@ -0,0 +1,60 @@ +/* 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/. */ + +/* ===== checkbox.css =================================================== + == Styles used by the XUL checkbox element. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* ::::: checkbox ::::: */ + +checkbox { + appearance: auto; + -moz-default-appearance: checkbox-container; + -moz-box-align: center; + margin: 2px 4px; + padding-top: 1px; + padding-bottom: 1px; + padding-inline-start: 4px; + padding-inline-end: 2px; +} + +.checkbox-icon[src] { + margin-inline-end: 2px; +} + +.checkbox-label { + margin: 0; +} + +/* ..... focused state ..... */ + +checkbox:-moz-focusring > .checkbox-label-box { + outline: 1px dotted; +} + +/* ..... disabled state ..... */ + +checkbox[disabled="true"] { + color: GrayText; +} + +@media (-moz-windows-classic) { + checkbox[disabled="true"] { + color: ThreeDShadow; + text-shadow: 1px 1px ThreeDHighlight; + } +} + +/* ::::: checkmark image ::::: */ + +.checkbox-check { + appearance: auto; + -moz-default-appearance: checkbox; + -moz-box-align: center; + min-width: 13px; + min-height: 13px; + margin-inline-end: 3px; +} diff --git a/toolkit/themes/windows/global/commonDialog.css b/toolkit/themes/windows/global/commonDialog.css new file mode 100644 index 0000000000..64c4664a84 --- /dev/null +++ b/toolkit/themes/windows/global/commonDialog.css @@ -0,0 +1,13 @@ +/* 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/. */ + +#infoContainer { + display: flex; + flex-direction: column; + justify-content: center; +} + +#infoIcon { + margin: 3px 5px 4px; +} diff --git a/toolkit/themes/windows/global/dialog.css b/toolkit/themes/windows/global/dialog.css new file mode 100644 index 0000000000..16e47fa412 --- /dev/null +++ b/toolkit/themes/windows/global/dialog.css @@ -0,0 +1,23 @@ +/* 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/. */ + +/* ===== dialog.css ===================================================== + == Styles used by the XUL dialog element. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* ::::: dialog ::::: */ + +:host { + padding-block: 8px 10px; + padding-inline: 8px 10px; +} + +/* ::::: dialog buttons ::::: */ + +button { + font: menu; + margin-top: 6px; +} diff --git a/toolkit/themes/windows/global/dirListing/dirListing.css b/toolkit/themes/windows/global/dirListing/dirListing.css new file mode 100644 index 0000000000..9a62b4693f --- /dev/null +++ b/toolkit/themes/windows/global/dirListing/dirListing.css @@ -0,0 +1,107 @@ +/* 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 { + background-color: -moz-dialog; + color: -moz-dialogtext; + font: message-box; + padding-inline: 2em; +} + +body { + border: 1px solid ThreeDShadow; + border-radius: 10px; + padding: 3em; + min-width: 30em; + max-width: 65em; + margin: 4em auto; + background-color: Field; + color: FieldText; +} + +h1 { + font-size: 160%; + margin: 0 0 .6em; + border-bottom: 1px solid ThreeDLightShadow; + font-weight: normal; +} + +a { + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +/* ensure multiple spaces are shown correctly. */ +td:first-child > a { + white-space: pre; +} + +p { + font-size: 110%; +} + +#UI_goUp { + margin-top: 0; + float: inline-start; +} + +#UI_showHidden { + margin-top: 0; + float: inline-end; +} + +table { + clear: both; + width: 90%; + margin: 0 auto; +} + +thead { + font-size: 130%; +} + +/* last modified */ +th:last-child { + text-align: center; +} + +th:hover > a { + text-decoration: underline; +} + +body > table > tbody > tr:hover { + outline: 1px solid ThreeDLightShadow; + -moz-outline-radius: .3em; +} + +/* let 'Size' and 'Last Modified' take only as much space as they need and 'Name' all the rest */ +td:not(:first-child) { + width: 0; +} + +.up { + padding: 0 .5em; + margin-inline-start: 20px; +} + +.up::before { + margin-inline: -20px 4px; + vertical-align: middle; +%ifdef MOZ_WIDGET_GTK + content: url(moz-icon://stock/gtk-go-up?size=menu); +%else + content: url(chrome://global/skin/dirListing/up.png); +%endif +} + +.dir::before { +%ifdef MOZ_WIDGET_GTK + content: url(moz-icon://stock/gtk-directory?size=menu); +%else + content: url(chrome://global/skin/dirListing/folder.png); +%endif +} diff --git a/toolkit/themes/windows/global/dirListing/folder.png b/toolkit/themes/windows/global/dirListing/folder.png Binary files differnew file mode 100644 index 0000000000..9c2a038426 --- /dev/null +++ b/toolkit/themes/windows/global/dirListing/folder.png diff --git a/toolkit/themes/windows/global/dirListing/up.png b/toolkit/themes/windows/global/dirListing/up.png Binary files differnew file mode 100644 index 0000000000..2c9136b5d9 --- /dev/null +++ b/toolkit/themes/windows/global/dirListing/up.png diff --git a/toolkit/themes/windows/global/dropmarker.css b/toolkit/themes/windows/global/dropmarker.css new file mode 100644 index 0000000000..02a20182d8 --- /dev/null +++ b/toolkit/themes/windows/global/dropmarker.css @@ -0,0 +1,13 @@ +/* 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; + height: 16px; + /* Cut off inheritance for dropmarkers within other widgets where + -moz-image-region might be set for the primary icon. */ + -moz-image-region: auto; +} diff --git a/toolkit/themes/windows/global/findBar.css b/toolkit/themes/windows/global/findBar.css new file mode 100644 index 0000000000..2dd8632a57 --- /dev/null +++ b/toolkit/themes/windows/global/findBar.css @@ -0,0 +1,5 @@ +/* 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/findBar.inc.css diff --git a/toolkit/themes/windows/global/global.css b/toolkit/themes/windows/global/global.css new file mode 100644 index 0000000000..72cf88543a --- /dev/null +++ b/toolkit/themes/windows/global/global.css @@ -0,0 +1,216 @@ +% 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/. + +/* ===== global.css ===================================================== + == Styles that apply everywhere. + ======================================================================= */ + +%include ../../shared/global.inc.css + +:root { + /* ::::: Variables ::::: */ + --arrowpanel-padding: 10px; + --default-arrowpanel-background: Field; + --default-arrowpanel-color: FieldText; + --default-arrowpanel-border-color: ThreeDShadow; + --arrowpanel-background: var(--default-arrowpanel-background); + --arrowpanel-color: var(--default-arrowpanel-color); + --arrowpanel-border-color: var(--default-arrowpanel-border-color); + --panel-disabled-color: GrayText; + --panel-description-color: GrayText; + /* ::::: Styles ::::: */ + background-color: -moz-Dialog; + color: -moz-DialogText; + font: message-box; +} + +@media (-moz-windows-default-theme) { + :root { + --arrowpanel-border-color: hsla(210,4%,10%,.2); + } +} + +/* ::::: Alert icons :::::*/ + +.message-icon, +.alert-dialog #infoIcon, +.alert-icon, +.error-icon, +.question-icon { + width: 32px; + height: 32px; +} + +.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.svg"); +} + +.error-icon { + list-style-image: url("chrome://global/skin/icons/Error.png"); +} + +.question-icon { + list-style-image: url("chrome://global/skin/icons/help.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.8; +} + +/* ::::: iframe ::::: */ + +xul|iframe { + border: none; + width: 100px; + height: 100px; + min-width: 10px; + min-height: 10px; +} + +@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") { + /* In emulation, <iframe> is block instead of inline, so reset the width/height */ + xul|iframe { + width: auto; + height: auto; + } +} + +xul|toolbar[mode="text"] .toolbarbutton-text { + padding: 0 !important; + margin: 3px 5px !important; +} + +/* ::::: Print preview ::::: */ + +.print-preview-navigate-button { + min-width: 1.9em; +} + +.print-preview-navigate-button > .toolbarbutton-icon { + display: none; +} + +#print-preview-portrait-button { + list-style-image: url("chrome://global/skin/icons/Print-preview.png"); + -moz-image-region: rect(0px 16px 16px 0px); +} + +#print-preview-landscape-button { + list-style-image: url("chrome://global/skin/icons/Print-preview.png"); + -moz-image-region: rect(0px 32px 16px 16px); +} + +#print-preview-portrait-button > .toolbarbutton-icon, +#print-preview-landscape-button > .toolbarbutton-icon { + margin-inline-end: 2px; +} + +html|*#print-preview-pageNumber { + /* 3 chars + (3px border + 1px padding) on both sides */ + width: calc(8px + 3ch); + margin: 0 4px; +} + +/* ::::: Miscellaneous formatting ::::: */ + +:root[lwtheme-image]:-moz-lwtheme-darktext { + text-shadow: 0 -0.5px 1.5px white; +} + +:root[lwtheme-image]:-moz-lwtheme-brighttext { + text-shadow: 1px 1px 1.5px black; +} + +/* 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 ThreeDShadow; + border-bottom: 1px solid ThreeDHighlight; + height: 0; + margin-block: 0.4em; +} +xul|separator.groove[orient="vertical"] { + border-left: 1px solid ThreeDShadow; + border-right: 1px solid ThreeDHighlight; + width: 0; + margin-inline: 0.4em; +} + +xul|description, +xul|label { + cursor: default; + margin-block: 1px 2px; + margin-inline: 6px 5px; +} + +xul|description { + margin-bottom: 4px; +} + +xul|label[disabled="true"] { + color: GrayText; +} + +@media (-moz-windows-classic) { + xul|label[disabled="true"] { + color: ThreeDShadow; + text-shadow: 1px 1px ThreeDHighlight; + } +} + +.tooltip-label { + margin: 0; +} + +.header { + font-weight: bold; +} + +.indent { + margin-inline-start: 23px; +} + +.box-padded { + padding: 5px; +} + +.text-link { + color: -moz-nativehyperlinktext; + cursor: pointer; +} + +.text-link:hover { + text-decoration: underline; +} + +.text-link:-moz-focusring { + outline: 1px dotted; +} + +html|input { + margin: 2px 4px; +} + +xul|popupnotificationcontent { + margin-top: .5em; +} + +%include ../../shared/notification-popup.inc.css diff --git a/toolkit/themes/windows/global/icons/Error.png b/toolkit/themes/windows/global/icons/Error.png Binary files differnew file mode 100644 index 0000000000..65249f8059 --- /dev/null +++ b/toolkit/themes/windows/global/icons/Error.png diff --git a/toolkit/themes/windows/global/icons/Landscape.png b/toolkit/themes/windows/global/icons/Landscape.png Binary files differnew file mode 100644 index 0000000000..fad822281e --- /dev/null +++ b/toolkit/themes/windows/global/icons/Landscape.png diff --git a/toolkit/themes/windows/global/icons/Portrait.png b/toolkit/themes/windows/global/icons/Portrait.png Binary files differnew file mode 100644 index 0000000000..afe9ee83f0 --- /dev/null +++ b/toolkit/themes/windows/global/icons/Portrait.png diff --git a/toolkit/themes/windows/global/icons/Print-preview.png b/toolkit/themes/windows/global/icons/Print-preview.png Binary files differnew file mode 100644 index 0000000000..51c760159c --- /dev/null +++ b/toolkit/themes/windows/global/icons/Print-preview.png diff --git a/toolkit/themes/windows/global/icons/blocklist_favicon.png b/toolkit/themes/windows/global/icons/blocklist_favicon.png Binary files differnew file mode 100644 index 0000000000..1331791a03 --- /dev/null +++ b/toolkit/themes/windows/global/icons/blocklist_favicon.png diff --git a/toolkit/themes/windows/global/icons/question-64.png b/toolkit/themes/windows/global/icons/question-64.png Binary files differnew file mode 100644 index 0000000000..4fc1ccc996 --- /dev/null +++ b/toolkit/themes/windows/global/icons/question-64.png diff --git a/toolkit/themes/windows/global/icons/search-textbox.svg b/toolkit/themes/windows/global/icons/search-textbox.svg new file mode 100644 index 0000000000..c2d9f3a8eb --- /dev/null +++ b/toolkit/themes/windows/global/icons/search-textbox.svg @@ -0,0 +1,7 @@ +<?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" width="12" height="12" viewBox="0 0 12 12"> + <path fill="#939393" fill-rule="evenodd" 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" transform="scale(-1, 1) translate(-12, 0)"/> +</svg>
\ No newline at end of file diff --git a/toolkit/themes/windows/global/icons/sslWarning.png b/toolkit/themes/windows/global/icons/sslWarning.png Binary files differnew file mode 100644 index 0000000000..cccf9408f7 --- /dev/null +++ b/toolkit/themes/windows/global/icons/sslWarning.png diff --git a/toolkit/themes/windows/global/icons/warning-large.png b/toolkit/themes/windows/global/icons/warning-large.png Binary files differnew file mode 100644 index 0000000000..7e30398c8c --- /dev/null +++ b/toolkit/themes/windows/global/icons/warning-large.png diff --git a/toolkit/themes/windows/global/icons/windowControls.png b/toolkit/themes/windows/global/icons/windowControls.png Binary files differnew file mode 100644 index 0000000000..1f1e9e885f --- /dev/null +++ b/toolkit/themes/windows/global/icons/windowControls.png diff --git a/toolkit/themes/windows/global/in-content/common.css b/toolkit/themes/windows/global/in-content/common.css new file mode 100644 index 0000000000..fb5ae3ed47 --- /dev/null +++ b/toolkit/themes/windows/global/in-content/common.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/. */ + +%include ../../../shared/in-content/common.inc.css + +:root { + --panel-border-radius: 0; +} + +xul|menulist::part(dropmarker) { + margin-block: 1px; +} + +xul|checkbox, +xul|radio { + padding-inline-start: 0; +} + +@media (-moz-windows-default-theme: 0) { + xul|checkbox[checked] > xul|*.checkbox-check, + xul|*.radio-check[selected] { + fill: FieldText; + background-color: Field; + } +} + +/* Override menulist.css */ +xul|menulist[disabled="true"] { + background-color: var(--in-content-button-background); +} + +xul|menulist:-moz-focusring > xul|*.menulist-label-box { + outline: none !important; +} + +html|input[type="checkbox"]:-moz-focusring + html|label:before { + outline: 1px dotted; +} + +/* Use a 2px border so that selected row highlight is still visible behind + an existing high-contrast border that uses the background color */ +@media (-moz-windows-default-theme: 0) { + xul|treechildren::-moz-tree-row(selected) { + border: 2px dotted Highlight; + } +} + +html|button { + /* XUL button min-width */ + min-width: 6.3em; +} + +xul|button > xul|*.button-box { + padding-inline: 0; +} diff --git a/toolkit/themes/windows/global/in-content/info-pages.css b/toolkit/themes/windows/global/in-content/info-pages.css new file mode 100644 index 0000000000..bdfec2d284 --- /dev/null +++ b/toolkit/themes/windows/global/in-content/info-pages.css @@ -0,0 +1,5 @@ +/* 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/in-content/info-pages.inc.css diff --git a/toolkit/themes/windows/global/jar.mn b/toolkit/themes/windows/global/jar.mn new file mode 100644 index 0000000000..f0d13c2949 --- /dev/null +++ b/toolkit/themes/windows/global/jar.mn @@ -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/. + +#include ../../shared/non-mac.jar.inc.mn + +toolkit.jar: + skin/classic/global/autocomplete.css + skin/classic/global/button.css + skin/classic/global/checkbox.css + skin/classic/global/dropmarker.css +* skin/classic/global/menu.css + skin/classic/global/menulist.css + skin/classic/global/radio.css + skin/classic/global/tabbox.css + skin/classic/global/search-textbox.css + skin/classic/global/commonDialog.css +* skin/classic/global/findBar.css +* skin/classic/global/global.css + skin/classic/global/netError.css +* skin/classic/global/popup.css +* skin/classic/global/popupnotification.css + skin/classic/global/printPageSetup.css + skin/classic/global/richlistbox.css + skin/classic/global/splitter.css + skin/classic/global/toolbar.css + skin/classic/global/toolbarbutton.css + skin/classic/global/tooltip.css +* skin/classic/global/tree.css +* skin/classic/global/alerts/alert.css (alerts/alert.css) + skin/classic/global/dirListing/folder.png (dirListing/folder.png) + skin/classic/global/dirListing/up.png (dirListing/up.png) + skin/classic/global/icons/blocklist_favicon.png (icons/blocklist_favicon.png) + skin/classic/global/icons/Error.png (icons/Error.png) + skin/classic/global/icons/Landscape.png (icons/Landscape.png) + skin/classic/global/icons/Portrait.png (icons/Portrait.png) + skin/classic/global/icons/Print-preview.png (icons/Print-preview.png) + skin/classic/global/icons/sslWarning.png (icons/sslWarning.png) + skin/classic/global/icons/warning-large.png (icons/warning-large.png) + skin/classic/global/icons/windowControls.png (icons/windowControls.png) +* skin/classic/global/in-content/common.css (in-content/common.css) +* skin/classic/global/in-content/info-pages.css (in-content/info-pages.css) + skin/classic/global/tree/sort-asc.svg (tree/sort-asc.svg) + skin/classic/global/tree/sort-dsc.svg (tree/sort-dsc.svg) + skin/classic/global/tree/sort-asc-classic.png (tree/sort-asc-classic.png) + skin/classic/global/tree/sort-dsc-classic.png (tree/sort-dsc-classic.png) diff --git a/toolkit/themes/windows/global/menu.css b/toolkit/themes/windows/global/menu.css new file mode 100644 index 0000000000..a238c19d66 --- /dev/null +++ b/toolkit/themes/windows/global/menu.css @@ -0,0 +1,276 @@ +/* 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/. */ + +/* ===== menu.css ======================================================= + == Styles used by XUL menu-related elements. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* ::::: menu/menuitem ::::: */ + +menupopup, +menubar { + font: menu; +} + +menu, +menuitem, +menucaption { + appearance: auto; + -moz-default-appearance: menuitem; + -moz-box-align: center; + list-style-image: none; + -moz-image-region: auto; +} + +menu[disabled="true"], +menuitem[disabled="true"], +menu[_moz-menuactive="true"][disabled="true"], +menuitem[_moz-menuactive="true"][disabled="true"] { + color: GrayText; + text-shadow: none; +} + +@media (-moz-windows-classic) { + menu[disabled="true"], + menubar > menu[disabled="true"][_moz-menuactive="true"], + menuitem[disabled="true"] { + color: ThreeDShadow; + text-shadow: 1px 1px ThreeDHighlight; + } +} + +menuitem[default="true"], +menuitem.spell-suggestion, +menucaption { + font-weight: bold; +} + +/* ..... Internal content .... */ + +.menu-accel, +.menu-iconic-accel, +.menu-text, +.menu-iconic-text { + margin: 0 !important; + padding: 1px 0; +} + +.menu-text { + padding-inline-start: 1.45em !important; + appearance: auto; + -moz-default-appearance: menuitemtext; +} + +.menu-text, +.menu-iconic-text { + margin-inline-start: 2px !important; + padding-inline-end: 2px; +} + +.menu-accel, +.menu-iconic-accel { + margin-inline: 0.74em 1.35em !important; +} + +.menu-iconic-left { + min-width: 1.45em; +} + +.menu-iconic-icon { + width: 16px; + height: 16px; +} + +.menu-iconic > .menu-iconic-left, +.menuitem-iconic > .menu-iconic-left { + appearance: auto; + -moz-default-appearance: menuimage; + padding-top: 2px; +} + +/* ..... menu arrow box ..... */ + +.menu-right { + appearance: auto; + -moz-default-appearance: menuarrow; + margin-inline-end: -2px; + list-style-image: none; + min-width: 1.28em; + padding-top: 1px; +} + +/* ::::: menu/menuitems in menubar ::::: */ + +menubar > menu[_moz-menuactive="true"]:not([disabled="true"]) { + color: -moz-menubarhovertext; +} + +@media (-moz-windows-classic) { + menubar > menu { + border: 2px solid transparent; + } + + menubar > menu[_moz-menuactive="true"][open="true"] { + border-width: 3px 1px 1px 3px; + } +} + +menubar > menu:-moz-lwtheme { + appearance: none; + border-color: transparent; +} + +menubar > menu:-moz-lwtheme:not([disabled="true"]) { + color: inherit !important; +} + +menubar > menu:-moz-lwtheme[_moz-menuactive="true"]:not([disabled="true"]) { + background-color: Highlight; + color: HighlightText !important; + text-shadow: none; +} + +@media (-moz-windows-default-theme) { + menubar > menu:-moz-lwtheme { + appearance: auto; + -moz-default-appearance: menuitem; + } + + menubar > menu:-moz-lwtheme[_moz-menuactive="true"]:not([disabled="true"]) { + color: inherit !important; + text-shadow: inherit; + } +} + +%ifdef XP_WIN +menubar > menu:-moz-window-inactive { + color: ThreeDShadow; +} +%endif + +/* ..... internal content .... */ + +.menubar-text { + margin: 1px 6px 2px !important; +} + +/* ::::: menu/menuitems in popups ::::: */ + +menupopup > menu, +menupopup > menuitem, +menupopup > menucaption { + max-width: 42em; +} + +menu[_moz-menuactive="true"], +menuitem[_moz-menuactive="true"] { + background-color: -moz-menuhover; + color: -moz-menuhovertext; +} + +/* ::::: menu/menuitems in menulist popups ::::: */ + +menulist > menupopup { + font: inherit; +} + +menulist > menupopup > menuitem, +menulist > menupopup > menucaption, +menulist > menupopup > menu { + appearance: none !important; + border: 1px solid transparent; + padding-inline: 5px; + max-width: none; + color: FieldText; +} + +menulist > menupopup > menuitem[_moz-menuactive="true"], +menulist > menupopup > menu[_moz-menuactive="true"] { + background-color: highlight; + color: highlighttext; +} + +menulist > menupopup > menuitem > .menu-iconic-left, +menulist > menupopup > menucaption > .menu-iconic-left, +menulist > menupopup > menu > .menu-iconic-left { + display: none; +} + +menulist > menupopup > menuitem > label, +menulist > menupopup > menucaption > label, +menulist > menupopup > menu > label { + padding-top: 0; + padding-bottom: 0; +} + +menulist:-moz-focusring > menupopup > menuitem[_moz-menuactive="true"] { + border: 1px dotted #F5DB95; +} + +menulist > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] { + color: GrayText; +} + +@media (-moz-windows-classic) { + menulist > menupopup > menuitem[disabled="true"]:not([_moz-menuactive="true"]) { + color: GrayText; + text-shadow: none; + } +} + +menulist > menupopup > :is(menuitem, menucaption):not(.menuitem-iconic) > .menu-iconic-text { + margin: 0 !important; +} + +/* ::::: checkbox and radio menuitems ::::: */ + +menuitem[type="checkbox"], +menuitem[checked="true"] { + appearance: auto; + -moz-default-appearance: checkmenuitem; +} +menuitem[type="checkbox"] > .menu-iconic-left, +menuitem[checked="true"] > .menu-iconic-left { + appearance: auto; + -moz-default-appearance: menucheckbox; + padding-top: 0; +} + +menuitem[type="radio"] { + appearance: auto; + -moz-default-appearance: radiomenuitem; +} +menuitem[type="radio"] > .menu-iconic-left { + appearance: auto; + -moz-default-appearance: menuradio; + padding-top: 0; +} + +menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon, +menuitem[checked="true"] > .menu-iconic-left > .menu-iconic-icon, +menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon { + /* prevent .menu-iconic-icon from enforcing a minimal height of 16px (see bug 411064) + XXXzeniko apply that .menu-iconic-icon rule only for children of .menu-iconic */ + display: none; +} + +/* ::::: menuseparator ::::: */ + +menuseparator { + appearance: auto; + -moz-default-appearance: menuseparator; + padding: 3px 1px 4px; + border-top: 1px solid ThreeDShadow; + border-bottom: 1px solid ThreeDHighlight; +} + +menulist > menupopup > menuseparator { + padding: 6px 0 5px; + border-top: 1px solid #000000; + border-bottom: none; +} + +%include ../../shared/menu-scrolling.inc.css diff --git a/toolkit/themes/windows/global/menulist.css b/toolkit/themes/windows/global/menulist.css new file mode 100644 index 0000000000..7ca8b28421 --- /dev/null +++ b/toolkit/themes/windows/global/menulist.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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +:host { + appearance: auto; + -moz-default-appearance: menulist; + margin: 2px 4px; + color: FieldText; + text-shadow: none; +} + +:host([disabled="true"]) { + background-color: -moz-Dialog; + color: GrayText; +} + +/* Label box */ + +#label-box { + -moz-box-align: center; + -moz-box-pack: center; +} + +:host(:not([open="true"]):focus) > #label-box { + background-color: Highlight; + color: HighlightText; +} + +:host(:not([open="true"]):-moz-focusring) > #label-box { + outline: 1px dotted; +} + +/* Labels */ + +label { + margin: 0 3px !important; +} + +#highlightable-label:not([highlightable="true"]), +#label[highlightable="true"] { + display: none; +} + +@media (-moz-windows-default-theme) { + #label-box { + background-color: transparent !important; + color: inherit !important; + } + + image, + label { + margin-block: -1px !important; + } + + dropmarker { + margin-top: -2px; + margin-inline: 3px -3px; + } +} diff --git a/toolkit/themes/windows/global/moz.build b/toolkit/themes/windows/global/moz.build new file mode 100644 index 0000000000..d988c0ff9b --- /dev/null +++ b/toolkit/themes/windows/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/windows/global/netError.css b/toolkit/themes/windows/global/netError.css new file mode 100644 index 0000000000..fe8c8483f3 --- /dev/null +++ b/toolkit/themes/windows/global/netError.css @@ -0,0 +1,104 @@ +/* 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/. */ + +/* + * This defines the look-and-feel styling of the error pages. + * (see: netError.xhtml) + * + * Original styling by William Price <bugzilla@mob.rice.edu> + * Updated by: Steven Garrity <steven@silverorange.com> + * Henrik Skupin <mozilla@hskupin.info> + */ + +html { + background: -moz-Dialog; +} + +body { + margin: 0; + padding: 0 1em; + color: FieldText; + font: message-box; +} + +h1 { + margin: 0 0 .6em; + border-bottom: 1px solid ThreeDLightShadow; + font-size: 160%; +} + +ul, ol { + margin: 0; + margin-inline-start: 1.5em; + padding: 0; +} + +ul > li, +ol > li { + margin-bottom: .5em; +} + +ul { + list-style: square; +} + +#errorPageContainer { + position: relative; + min-width: 13em; + max-width: 52em; + margin: 4em auto; + border: 1px solid ThreeDShadow; + border-radius: 10px; + padding: 3em; + padding-inline-start: 30px; + background: url("chrome://global/skin/icons/warning-large.png") left 0 no-repeat Field; + background-origin: content-box; +} + +#errorPageContainer.certerror { + background-image: url("chrome://global/skin/icons/sslWarning.png"); +} + +#errorPageContainer:dir(rtl) { + background-position: right 0; +} + +#errorLongContent, +#errorTitle { + margin-inline-start: 80px; +} + +#errorShortDesc > p { + overflow: auto; + border-bottom: 1px solid ThreeDLightShadow; + padding-bottom: 1em; + font-size: 130%; + white-space: pre-wrap; +} + +#errorLongDesc { + padding-inline-end: 3em; + font-size: 110%; +} + +#errorTryAgain { + margin-top: 2em; + margin-inline-start: 80px; +} + +#errorContainer { + display: none; +} + +#securityOverrideDiv { + padding-top: 10px; +} + +#securityOverrideContent { + background-color: InfoBackground; + color: InfoText; + padding: 10px; + border-radius: 10px; + display: none; +} diff --git a/toolkit/themes/windows/global/popup.css b/toolkit/themes/windows/global/popup.css new file mode 100644 index 0000000000..fd4f7712e7 --- /dev/null +++ b/toolkit/themes/windows/global/popup.css @@ -0,0 +1,132 @@ +/* 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 ::::: */ + +menupopup, +panel { + border: 1px solid ThreeDShadow; + padding: 0; + min-width: 1px; + background: Menu; + color: MenuText; +} + +menupopup { + appearance: auto; + -moz-default-appearance: menupopup; +} + +menupopup > menu > menupopup { + /* align submenus */ + margin-inline-start: -3px; + margin-top: -3px; +} + +panel[type="arrow"] { + appearance: none; + background: transparent; + border: none; +} + +panel[type="arrow"][side="top"], +panel[type="arrow"][side="bottom"] { + margin-inline: -20px; +} + +panel[type="arrow"][side="left"], +panel[type="arrow"][side="right"] { + margin-block: -20px; +} + +.panel-arrowcontent { + padding: var(--arrowpanel-padding); + color: var(--arrowpanel-color); + background: var(--arrowpanel-background); + background-clip: padding-box; + border: 1px solid var(--arrowpanel-border-color); + box-shadow: 0 0 4px hsla(0,0%,0%,.2); + margin: 4px; +} + +.panel-arrowcontent > html|slot { + /* propagate border-radius from arrowcontent to slotted children */ + border-radius: inherit; +} + +:host([orient=vertical]) .panel-arrowcontent { + -moz-box-orient: vertical; +} + +%ifdef XP_WIN +@media (-moz-os-version: windows-win7) { +%endif +.panel-arrowcontent { + border-radius: 4px; +} +%ifdef XP_WIN +} +%endif + +panel[type="arrow"].panel-no-padding::part(arrowcontent) { + padding: 0; + overflow: hidden; /* Don't let panel content overflow the border-radius */ +} + +:is(panel, menupopup)::part(arrow) { + -moz-context-properties: fill, stroke; + fill: var(--arrowpanel-background); + stroke: var(--arrowpanel-border-color); +} + +:is(panel, menupopup)[side="top"]::part(arrow), +:is(panel, menupopup)[side="bottom"]::part(arrow) { + list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg"); + position: relative; + margin-inline: 10px; +} + +:is(panel, menupopup)[side="top"]::part(arrow) { + margin-bottom: -5px; +} + +:is(panel, menupopup)[side="bottom"]::part(arrow) { + transform: scaleY(-1); + margin-top: -5px; +} + +:is(panel, menupopup)[side="left"]::part(arrow), +:is(panel, menupopup)[side="right"]::part(arrow) { + list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg"); + position: relative; + margin-block: 10px; +} + +:is(panel, menupopup)[side="left"]::part(arrow) { + margin-right: -5px; +} + +:is(panel, menupopup)[side="right"]::part(arrow) { + transform: scaleX(-1); + margin-left: -5px; +} + +%ifdef XP_WIN +@media (-moz-windows-default-theme) { + .panel-arrowcontent { + box-shadow: 0 0 4px hsla(210,4%,10%,.2); + } +} +%endif + +/* rules for popups associated with menulists */ + +menulist > menupopup { + appearance: none; + min-width: 0; + background-color: Field; +} diff --git a/toolkit/themes/windows/global/popupnotification.css b/toolkit/themes/windows/global/popupnotification.css new file mode 100644 index 0000000000..aad026398b --- /dev/null +++ b/toolkit/themes/windows/global/popupnotification.css @@ -0,0 +1,22 @@ +%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 +%include ../../shared/popupnotification.inc.css + +/* Override default icon size which is too small for this dropdown */ +.popup-notification-dropmarker > .button-box > .button-menu-dropmarker { + width: 16px; + height: 16px; +} + +/* Swap the primary and secondary action, because Windows + * platform conventions put the primary action on the left. */ +.popup-notification-primary-button { + order: -1; +} + +.popup-notification-secondary-button:not([hidden="true"]) ~ .popup-notification-primary-button:not([default]) { + border-inline-end: 1px solid var(--panel-separator-color); +} diff --git a/toolkit/themes/windows/global/printPageSetup.css b/toolkit/themes/windows/global/printPageSetup.css new file mode 100644 index 0000000000..b3a22de106 --- /dev/null +++ b/toolkit/themes/windows/global/printPageSetup.css @@ -0,0 +1,26 @@ +/* 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/. */ + +fieldset { + border: 0.5px groove ThreeDLightShadow; + margin: 6px 3px; +} + +.groupbox-body { + /* We cannot use padding on the groupbox due to its -moz-appearance. */ + margin: 3px 3px 6px; +} + +.portrait-page { + list-style-image: url("chrome://global/skin/icons/Portrait.png"); +} + +.landscape-page { + list-style-image: url("chrome://global/skin/icons/Landscape.png"); +} + +#header-footer-grid { + display: grid; + grid-template-columns: auto auto auto; +} diff --git a/toolkit/themes/windows/global/radio.css b/toolkit/themes/windows/global/radio.css new file mode 100644 index 0000000000..de6ef86365 --- /dev/null +++ b/toolkit/themes/windows/global/radio.css @@ -0,0 +1,61 @@ +/* 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/. */ + +/* ===== radio.css =================================================== + == Styles used by the XUL radio element. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* ::::: radio ::::: */ + +radio { + appearance: auto; + -moz-default-appearance: radio-container; + -moz-box-align: center; + margin: 2px 4px; + padding-top: 1px; + padding-bottom: 1px; + padding-inline-start: 4px; + padding-inline-end: 2px; +} + +.radio-check { + appearance: auto; + -moz-default-appearance: radio; + margin: 1px 0; +} + +.radio-label-box { + margin-inline-start: 2px; + padding-bottom: 1px; + padding-inline-start: 1px; +} + +.radio-icon[src] { + margin-inline-end: 2px; +} + +.radio-label { + margin: 0; +} + +/* ..... focused state ..... */ + +radio[focused="true"] > .radio-label-box { + outline: 1px dotted; +} + +/* ..... disabled state ..... */ + +radio[disabled="true"] { + color: GrayText; +} + +@media (-moz-windows-classic) { + radio[disabled="true"] { + color: ThreeDShadow; + text-shadow: 1px 1px ThreeDHighlight; + } +} diff --git a/toolkit/themes/windows/global/richlistbox.css b/toolkit/themes/windows/global/richlistbox.css new file mode 100644 index 0000000000..a874a8201c --- /dev/null +++ b/toolkit/themes/windows/global/richlistbox.css @@ -0,0 +1,159 @@ +/* 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; + overflow: auto; +} + +richlistbox[disabled="true"] { + color: GrayText; +} + +richlistitem[selected="true"] { + background-color: -moz-cellhighlight; + color: -moz-cellhighlighttext; +} + +richlistbox:focus > richlistitem[selected="true"] { + background-color: Highlight; + color: HighlightText; +} + +richlistbox[seltype="multiple"]:focus > richlistitem[current="true"] { + outline: 1px dotted Highlight; + outline-offset: -1px; +} + +richlistbox[seltype="multiple"]:focus > richlistitem[current="true"][selected="true"] { + outline: 1px dotted #F3D982; /* TODO: find a suitable system color */ +} + +richlistbox.theme-listbox > richlistitem { + border: 1px solid transparent; +} + +richlistbox.theme-listbox:focus > richlistitem[selected="true"][current="true"] { + outline: 1px dotted #F3D982; +} + +richlistbox.theme-listbox:focus > richlistitem[current="true"] { + outline: 1px dotted Highlight; + outline-offset: -1px; +} + +richlistbox.theme-listbox > richlistitem[selected="true"] { + background-color: -moz-cellhighlight; + color: -moz-cellhighlighttext; +} + +richlistbox.theme-listbox:focus > richlistitem[selected="true"] { + background-color: Highlight; + color: HighlightText; +} + +richlistbox.theme-listbox > richlistitem > label { + margin: 0; + padding-block: 0 1px; + padding-inline: 4px 0; + white-space: nowrap; +} + +@media (-moz-windows-default-theme) { + richlistbox.theme-listbox > richlistitem { + --listitem-selectedColor: rgb(217,217,217); + --listitem-selectedBorder: var(--listitem-selectedColor); + --listitem-selectedBottomBorder: rgb(204,204,204); + --listitem-selectedBackground: var(--listitem-selectedColor); + --listitem-selectedImage: none; + --listitem-selectedCurrentBorder: rgb(123,195,255); + --listitem-selectedFocusColor: rgb(205,232,255); + --listitem-selectedFocusBorder: var(--listitem-selectedFocusColor); + --listitem-selectedFocusBottomBorder: rgb(165,214,255); + --listitem-selectedFocusBackground: var(--listitem-selectedFocusColor); + --listitem-selectedFocusImage: none; + --listitem-selectedFocusCurrentBorder: var(--listitem-selectedFocusColor); + --listitem-selectedFocusCurrentBottomBorder: var(--listitem-selectedFocusBottomBorder); + --listitem-selectedFocusCurrentBackground: var(--listitem-selectedFocusColor); + + color: FieldText; + margin-inline: 1px; + padding-block: 1px; + border-width: 1px; + background-repeat: no-repeat; + background-size: 100% 100%; + } + + richlistbox.theme-listbox > richlistitem[selected="true"] { + border-top-color: var(--listitem-selectedBorder); + border-inline-color: var(--listitem-selectedBorder); + border-bottom-color: var(--listitem-selectedBottomBorder); + background-image: var(--listitem-selectedImage); + background-color: var(--listitem-selectedBackground); + color: -moz-DialogText; + } + + richlistbox.theme-listbox:focus > richlistitem[selected="true"] { + border-top-color: var(--listitem-selectedFocusBorder); + border-inline-color: var(--listitem-selectedFocusBorder); + border-bottom-color: var(--listitem-selectedFocusBottomBorder); + background-image: var(--listitem-selectedFocusImage); + background-color: var(--listitem-selectedFocusBackground); + color: -moz-DialogText; + } + + richlistbox.theme-listbox:focus > richlistitem[current="true"] { + border-color: var(--listitem-selectedCurrentBorder); + outline: none; + } + + richlistbox.theme-listbox:focus > richlistitem[selected="true"][current="true"] { + border-top-color: var(--listitem-selectedFocusCurrentBorder); + border-inline-color: var(--listitem-selectedFocusCurrentBorder); + border-bottom-color: var(--listitem-selectedFocusCurrentBottomBorder); + background-color: var(--listitem-selectedFocusCurrentBackground); + outline: none; + } + + @media (-moz-os-version: windows-win7) { + richlistbox.theme-listbox > richlistitem { + --listitem-selectedBottomBorder: var(--listitem-selectedColor); + --listitem-selectedBackground: rgba(190,190,190,.15); + --listitem-selectedImage: linear-gradient(rgba(190,190,190,.1), rgba(190,190,190,.4)); + --listitem-selectedCurrentBorder: rgb(125,162,206); + --listitem-selectedFocusColor: rgb(132,172,221); + --listitem-selectedFocusBottomBorder: var(--listitem-selectedFocusColor); + --listitem-selectedFocusBackground: rgba(131,183,249,.02); + --listitem-selectedFocusImage: linear-gradient(rgba(131,183,249,.16), rgba(131,183,249,.375)); + --listitem-selectedFocusCurrentBackground: rgba(131,183,249,.15); + + border-radius: 3px; + box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 -1px 0 1px rgba(255,255,255,.2); + } + } + + @media (-moz-os-version: windows-win8) { + richlistbox.theme-listbox > richlistitem { + --listitem-selectedBottomBorder: var(--listitem-selectedColor); + --listitem-selectedBackground: rgba(190,190,190,.15); + --listitem-selectedImage: linear-gradient(rgba(190,190,190,.4), rgba(190,190,190,.4)); + --listitem-selectedCurrentBorder: rgb(125,162,206); + --listitem-selectedFocusColor: rgb(132,172,221); + --listitem-selectedFocusBottomBorder: var(--listitem-selectedFocusColor); + --listitem-selectedFocusBackground: rgba(131,183,249,.02); + --listitem-selectedFocusImage: linear-gradient(rgba(131,183,249,.375), rgba(131,183,249,.375)); + --listitem-selectedFocusCurrentBackground: rgba(131,183,249,.15); + } + } +} + +listheader { + color: -moz-DialogText; +} diff --git a/toolkit/themes/windows/global/search-textbox.css b/toolkit/themes/windows/global/search-textbox.css new file mode 100644 index 0000000000..4b38dbf140 --- /dev/null +++ b/toolkit/themes/windows/global/search-textbox.css @@ -0,0 +1,80 @@ +/* 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"); + +/* ::::: search textbox ::::: */ + +:host { + appearance: auto; + -moz-default-appearance: textfield; + cursor: text; + margin: 2px 4px; /* matches <input> global.css margin */ + padding: 2px 2px 3px; + padding-inline-start: 4px; + background-color: Field; + color: FieldText; +} + +html|input { + border: none; + padding: 0 1px; + background-color: transparent; + outline: none; + color: inherit; + font: inherit; + text-shadow: inherit; + box-sizing: border-box; + -moz-box-flex: 1; + text-align: inherit; +} + +/* ..... readonly state ..... */ + +:host([readonly="true"]) { + background-color: -moz-Dialog; + color: -moz-DialogText; +} + +/* ..... disabled state ..... */ + +:host([disabled="true"]) { + cursor: default; + background-color: -moz-Dialog; + color: GrayText; +} + +/* ::::: icons ::::: */ + +:host(:not([searchbutton])) > .textbox-search-sign { + list-style-image: url(chrome://global/skin/icons/search-textbox.svg); + margin-inline-end: 5px; +} + +:host([searchbutton]) .textbox-search-icon { + list-style-image: url(chrome://global/skin/icons/search-textbox.svg); +} + +.textbox-search-sign:-moz-locale-dir(rtl), +.textbox-search-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +:host([searchbutton]) .textbox-search-icon:not([disabled]) { + cursor: pointer; +} + +.textbox-search-clear { + list-style-image: url(chrome://global/skin/icons/searchfield-cancel.svg); +} + +.textbox-search-clear:not([disabled]) { + cursor: default; +} + +/* Don't leave extra blank space with long placeholders (see bug 1385902) */ +:host(:not([searchbutton])) > .textbox-search-icons:not([selectedIndex="1"]) { + display: none; +} diff --git a/toolkit/themes/windows/global/splitter.css b/toolkit/themes/windows/global/splitter.css new file mode 100644 index 0000000000..15e7e9241d --- /dev/null +++ b/toolkit/themes/windows/global/splitter.css @@ -0,0 +1,61 @@ +/* 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/. */ + +/* ===== splitter.css =================================================== + == Styles used by the XUL splitter element. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* ::::: splitter (vertical) ::::: */ + +splitter { + -moz-box-align: center; + -moz-box-pack: center; + cursor: ew-resize; + border-width: 0 1px; + border-style: solid; + border-inline-start-color: ThreeDHighlight; + border-inline-end-color: ThreeDShadow; + min-width: 6px; + background-color: ThreeDFace; +} + +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; + border-width: 1px 0; + border-top-color: ThreeDHighlight; + border-bottom-color: ThreeDShadow; + min-height: 6px; +} + +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/windows/global/tabbox.css b/toolkit/themes/windows/global/tabbox.css new file mode 100644 index 0000000000..669f68443b --- /dev/null +++ b/toolkit/themes/windows/global/tabbox.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/. */ + +/* ===== tabbox.css ================================================= + == Styles used by XUL tab-related elements. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* ::::: tabpanels ::::: */ + +tabpanels { + appearance: auto; + -moz-default-appearance: tabpanels; + padding: 8px; + color: -moz-DialogText; +} + +/* ::::: tab ::::: */ + +tab { + appearance: auto; + -moz-default-appearance: tab; + margin-top: 2px; + padding: 1px 4px 2px; + color: -moz-DialogText; +} + +.tab-text { + margin: 0 !important; +} + +tab[visuallyselected="true"] { + margin-top: 0; + padding: 1px 6px 4px; +} + +tab:-moz-focusring > .tab-middle { + /* Don't specify the outline-color, we should always use initial value. */ + outline: 1px dotted; +} + +tab:first-of-type[visuallyselected="true"] { + padding-inline: 5px; +} diff --git a/toolkit/themes/windows/global/tabprompts.css b/toolkit/themes/windows/global/tabprompts.css new file mode 100644 index 0000000000..1ed801341b --- /dev/null +++ b/toolkit/themes/windows/global/tabprompts.css @@ -0,0 +1,26 @@ +/* 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 */ +} + +.paymentDialogContainerFrame, +.tabmodalprompt-mainContainer { + color: FieldText; + background-color: Field; + border-radius: 2px; + border: 1px solid threeDDarkShadow; +} + +.tabmodalprompt-buttonContainer { + background-color: hsla(0,0%,0%,.05); + border-top: 1px solid hsla(0,0%,0%,.05); +} diff --git a/toolkit/themes/windows/global/toolbar.css b/toolkit/themes/windows/global/toolbar.css new file mode 100644 index 0000000000..45b79eafdd --- /dev/null +++ b/toolkit/themes/windows/global/toolbar.css @@ -0,0 +1,58 @@ +/* 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/. */ + +/* ===== toolbar.css ==================================================== + == Styles used by XUL toolbar-related elements. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +toolbox { + appearance: auto; + -moz-default-appearance: toolbox; +} + +toolbar { + appearance: auto; + -moz-default-appearance: toolbar; + min-width: 1px; + min-height: 19px; +} + +toolbar:first-child { + min-width: 1px; +} + +toolbox:-moz-lwtheme, +toolbar:-moz-lwtheme { + appearance: none; +} + +toolbarseparator { + appearance: auto; + -moz-default-appearance: separator; +} + +toolbarspacer { + width: 15px; +} + +toolbarpaletteitem { + cursor: grab; +} + +/* 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/windows/global/toolbarbutton.css b/toolkit/themes/windows/global/toolbarbutton.css new file mode 100644 index 0000000000..14aa94d92a --- /dev/null +++ b/toolkit/themes/windows/global/toolbarbutton.css @@ -0,0 +1,101 @@ +/* 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.css ===================================================== + == Styles used by the XUL button element. + ======================================================================= */ + +/* ::::: toolbarbutton ::::: */ + +toolbarbutton { + appearance: auto; + -moz-default-appearance: toolbarbutton; + -moz-box-align: center; + -moz-box-pack: center; + margin: 0; + padding: 3px; +} + +.toolbarbutton-text { + margin: 0; + text-align: center; +} + +toolbarbutton.tabbable { + -moz-user-focus: normal !important; +} + +toolbarbutton:-moz-focusring { + outline: 1px dotted; + outline-offset: -2px; +} + +toolbarbutton[disabled="true"] { + color: GrayText; + text-shadow: none; +} + +@media (-moz-windows-classic) { + toolbarbutton[disabled="true"] { + color: ThreeDShadow; + text-shadow: 1px 1px ThreeDHighlight; + } +} + +@media (-moz-windows-default-theme) { + :root[lwtheme-image] toolbarbutton { + text-shadow: none; + } + + :root[lwtheme-image] toolbarbutton:not([disabled="true"]) { + text-shadow: inherit; + } +} + +@media (-moz-windows-default-theme: 0) { + :root[lwtheme-image] toolbarbutton:not([disabled="true"]) { + text-shadow: inherit; + } +} + +/* ::::: toolbarbutton menu ::::: */ + +.toolbarbutton-menu-dropmarker, +.toolbarbutton-combined-buttons-dropmarker { + appearance: none; + list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg"); + -moz-context-properties: fill; + fill: currentColor; + width: auto; +} + +/* ::::: toolbarbutton badged ::::: */ + +.toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) { + margin-inline-end: 0; +} + +.toolbarbutton-badge { + box-sizing: border-box; + overflow: hidden; + white-space: nowrap; + background-color: #d90000; + font-size: 10px; + font-weight: bold; + padding: 0 2px 1px; + 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: -6px 0 0 !important; + margin-inline-end: -8px !important; + min-width: 14px; + max-width: 24px; + line-height: 10px; + text-align: center; + align-self: start; + justify-self: end; +} diff --git a/toolkit/themes/windows/global/tooltip.css b/toolkit/themes/windows/global/tooltip.css new file mode 100644 index 0000000000..709ec1666e --- /dev/null +++ b/toolkit/themes/windows/global/tooltip.css @@ -0,0 +1,22 @@ +/* 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/. */ + +/* + * This file is imported as a UA stylesheet because the default tooltip is + * built as native anonymous content. + */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +tooltip { + appearance: auto; + -moz-default-appearance: tooltip; + margin-top: 21px; + border: 1px solid InfoText; + padding: 2px 3px; + max-width: 40em; + background-color: InfoBackground; + color: InfoText; + font: message-box; +} diff --git a/toolkit/themes/windows/global/tree.css b/toolkit/themes/windows/global/tree.css new file mode 100644 index 0000000000..78f0ab3133 --- /dev/null +++ b/toolkit/themes/windows/global/tree.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/. */ + +%include ../../shared/tree.inc.css + +/* ::::: sort direction indicator ::::: */ + +.treecol-sortdirection { + list-style-image: none; + -moz-context-properties: fill; + fill: currentColor; +} + +treecol[sortDirection="ascending"]:not([hideheader="true"]) > .treecol-sortdirection { + list-style-image: url("chrome://global/skin/tree/sort-asc.svg"); +} + +treecol[sortDirection="descending"]:not([hideheader="true"]) > .treecol-sortdirection { + list-style-image: url("chrome://global/skin/tree/sort-dsc.svg"); +} + +@media (-moz-windows-classic) { + treecol, + treecolpicker { + border: 1px solid; + border-top-color: ThreeDHighlight; + border-inline-end-color: ThreeDShadow; + border-bottom-color: ThreeDShadow; + border-inline-start-color: ThreeDHighlight; + background-color: -moz-Dialog; + } + + treecol:hover:active, + treecolpicker:hover:active { + border-top-color: ThreeDShadow; + border-inline-end-color: ThreeDHighlight; + border-bottom-color: ThreeDHighlight; + border-inline-start-color: ThreeDShadow; + } + + treecol[sortDirection="ascending"]:not([hideheader="true"]) > .treecol-sortdirection { + list-style-image: url("chrome://global/skin/tree/sort-asc-classic.png"); + } + + treecol[sortDirection="descending"]:not([hideheader="true"]) > .treecol-sortdirection { + list-style-image: url("chrome://global/skin/tree/sort-dsc-classic.png"); + } +} diff --git a/toolkit/themes/windows/global/tree/sort-asc-classic.png b/toolkit/themes/windows/global/tree/sort-asc-classic.png Binary files differnew file mode 100644 index 0000000000..2654d04b86 --- /dev/null +++ b/toolkit/themes/windows/global/tree/sort-asc-classic.png diff --git a/toolkit/themes/windows/global/tree/sort-asc.svg b/toolkit/themes/windows/global/tree/sort-asc.svg new file mode 100644 index 0000000000..917fa96cf3 --- /dev/null +++ b/toolkit/themes/windows/global/tree/sort-asc.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" viewBox="0 0 9 7" width="9" height="7" fill="context-fill"> + <path d="M4.5 1.24a.9.9 0 0 0-.7.2l-2.6 2.7c-.8.87.43 2.1 1.3 1.3l2-2 2 2c.84.53 1.8-.5 1.2-1.3l-2.6-2.7a.9.9 0 0 0-.6-.2z"/> +</svg> diff --git a/toolkit/themes/windows/global/tree/sort-dsc-classic.png b/toolkit/themes/windows/global/tree/sort-dsc-classic.png Binary files differnew file mode 100644 index 0000000000..e42cc72987 --- /dev/null +++ b/toolkit/themes/windows/global/tree/sort-dsc-classic.png diff --git a/toolkit/themes/windows/global/tree/sort-dsc.svg b/toolkit/themes/windows/global/tree/sort-dsc.svg new file mode 100644 index 0000000000..97cbfc6917 --- /dev/null +++ b/toolkit/themes/windows/global/tree/sort-dsc.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" viewBox="0 0 9 7" width="9" height="7" fill="context-fill"> + <path d="M4.5 5.67a.9.9 0 0 1-.7-.2l-2.6-2.7c-.8-.87.43-2.1 1.3-1.3l2 2 2-2c.84-.53 1.8.5 1.2 1.3l-2.6 2.7a.9.9 0 0 1-.6.2z"/> +</svg> diff --git a/toolkit/themes/windows/global/wizard.css b/toolkit/themes/windows/global/wizard.css new file mode 100644 index 0000000000..8b161659f7 --- /dev/null +++ b/toolkit/themes/windows/global/wizard.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"); + +.wizard-header { + border-bottom: 2px groove ThreeDFace; + background-color: Window; + color: WindowText; +} + +.wizard-header-box-1 { + padding: 5px 0; +} + +.wizard-header-label { + margin-inline-start: 23px; + font-weight: bold; +} + +.wizard-header-description { + margin-inline-start: 44px; +} + +:host([data-branded="true"]) .wizard-header-icon { + list-style-image: url("chrome://branding/content/icon128.png"); + width: 48px; + height: 48px; + margin-inline-end: 5px; +} + +.wizard-page-box { + margin: 10px 44px; +} + +.wizard-buttons-separator { + margin-bottom: 0 !important; +} + +.wizard-buttons-box-2 { + margin: 10px; +} + +.wizard-button[dlgtype="finish"], +.wizard-button[dlgtype="next"] { + margin-inline-start: 0 !important; +} + +.wizard-button[dlgtype="back"] { + margin-inline-end: 0 !important; +} diff --git a/toolkit/themes/windows/global/xulscrollbars.css b/toolkit/themes/windows/global/xulscrollbars.css new file mode 100644 index 0000000000..473f15a3c9 --- /dev/null +++ b/toolkit/themes/windows/global/xulscrollbars.css @@ -0,0 +1,99 @@ +/* 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/. */ + +/* ===== xulscrollbars.css ============================================== + == Styles used by XUL scrollbar-related elements. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */ + +/* ::::: scrollbar ::::: */ + +scrollbar { + appearance: auto; + -moz-default-appearance: scrollbar-horizontal; + cursor: default; + background-color: #f0f0f0; +} + +@media all and (-moz-overlay-scrollbars) { + scrollbar[root="true"] { + position: relative; + z-index: 2147483647; /* largest positive value of a signed 32-bit integer */ + } + + scrollbar:not([active="true"]), + scrollbar[disabled="true"] { + visibility: hidden; + } +} + +scrollbar[orient="vertical"] { + appearance: auto; + -moz-default-appearance: scrollbar-vertical; +} + +/* ::::: slider - a thumb is inside ::::: */ +slider { + appearance: auto; + -moz-default-appearance: scrollbartrack-horizontal; +} + +slider[orient="vertical"] { + appearance: auto; + -moz-default-appearance: scrollbartrack-vertical; +} + +/* ::::: thumb (horizontal) ::::: */ + +thumb { + background-color: #cdcdcd; +} + +thumb[orient="vertical"] { + appearance: auto; + -moz-default-appearance: scrollbarthumb-vertical; + min-height: 8px; +} + +thumb[orient="horizontal"] { + appearance: auto; + -moz-default-appearance: scrollbarthumb-horizontal; + min-width: 8px; +} + +/* ::::: square at the corner of two scrollbars ::::: */ + +scrollcorner { + appearance: auto; + -moz-default-appearance: scrollcorner; + width: 16px; + cursor: default; + background-color: -moz-Dialog; +} + +/* ..... increment .... */ + +scrollbarbutton[type="increment"] { + appearance: auto; + -moz-default-appearance: scrollbarbutton-right; +} + +scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] { + appearance: auto; + -moz-default-appearance: scrollbarbutton-down; +} + +/* ..... decrement .... */ + +scrollbarbutton[type="decrement"] { + appearance: auto; + -moz-default-appearance: scrollbarbutton-left; +} + +scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] { + appearance: auto; + -moz-default-appearance: scrollbarbutton-up; +} diff --git a/toolkit/themes/windows/moz.build b/toolkit/themes/windows/moz.build new file mode 100644 index 0000000000..096017b685 --- /dev/null +++ b/toolkit/themes/windows/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/. + +DIRS += ["global", "mozapps"] diff --git a/toolkit/themes/windows/mozapps/downloads/unknownContentType.css b/toolkit/themes/windows/mozapps/downloads/unknownContentType.css new file mode 100644 index 0000000000..4a438372b2 --- /dev/null +++ b/toolkit/themes/windows/mozapps/downloads/unknownContentType.css @@ -0,0 +1,33 @@ +/* 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/. */ + +#type { + -moz-box-flex: 1; + background-color: transparent; + color: inherit; +} + +#from { + margin-top: 1px; +} + +#location { + font-weight: bold; +} + +#contentTypeImage { + height: 16px; + width: 16px; + margin-block: 0; + margin-inline-start: 0; + margin-inline-end: 5px; +} + +.small-indent { + margin-inline: 15px; +} + +.small-indent label { + margin-inline-start: 0; +} diff --git a/toolkit/themes/windows/mozapps/extensions/blocklist.css b/toolkit/themes/windows/mozapps/extensions/blocklist.css new file mode 100644 index 0000000000..1cdbb35ac6 --- /dev/null +++ b/toolkit/themes/windows/mozapps/extensions/blocklist.css @@ -0,0 +1,20 @@ +/* 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/. */ + +richlistitem { + padding-top: 6px; + padding-bottom: 6px; + padding-inline-start: 7px; + padding-inline-end: 7px; + border-bottom: 1px solid #C0C0C0; +} + +.addonName { + font-weight: bold; +} + +.blockedLabel { + font-weight: bold; + font-style: italic; +} diff --git a/toolkit/themes/windows/mozapps/handling/handling.css b/toolkit/themes/windows/mozapps/handling/handling.css new file mode 100644 index 0000000000..8aa9db58b8 --- /dev/null +++ b/toolkit/themes/windows/mozapps/handling/handling.css @@ -0,0 +1,25 @@ +/* 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/. */ + +richlistitem[type] { + min-height: 36px; /* Don't forget to update the richlistbox height! */ + padding-inline-start: 2px; + } + +richlistitem { + -moz-box-align: center; +} + +richlistbox { + /* 3 items high, plus 4px for top and bottom margins, less 2px for border */ + min-height: 110px; +} + +.name { + font-weight: bold; +} + +.description { + color: GrayText; +} diff --git a/toolkit/themes/windows/mozapps/jar.mn b/toolkit/themes/windows/mozapps/jar.mn new file mode 100644 index 0000000000..2f031eb5be --- /dev/null +++ b/toolkit/themes/windows/mozapps/jar.mn @@ -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/. + +toolkit.jar: +#include ../../shared/mozapps.inc.mn + skin/classic/mozapps/update/updates.css (update/updates.css) diff --git a/toolkit/themes/windows/mozapps/moz.build b/toolkit/themes/windows/mozapps/moz.build new file mode 100644 index 0000000000..d988c0ff9b --- /dev/null +++ b/toolkit/themes/windows/mozapps/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/windows/mozapps/profile/profileSelection.css b/toolkit/themes/windows/mozapps/profile/profileSelection.css new file mode 100644 index 0000000000..f18c245174 --- /dev/null +++ b/toolkit/themes/windows/mozapps/profile/profileSelection.css @@ -0,0 +1,20 @@ +/* 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.css"); + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +box#managebuttons > button { + min-width: 8em; +} + +#managebuttons { + padding-top: 1em; +} + +#profiles { + height: 12em; +} diff --git a/toolkit/themes/windows/mozapps/update/updates.css b/toolkit/themes/windows/mozapps/update/updates.css new file mode 100644 index 0000000000..ab95e5329e --- /dev/null +++ b/toolkit/themes/windows/mozapps/update/updates.css @@ -0,0 +1,89 @@ +/* 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/. */ + +/* Elevation Dialog */ +/* Specify the size for the UI so it has a fixed size. 3rd + party themes should typically specify the same values. */ +#elevationBox, .update-content { + height: 360px; + width: 700px; +} + +/* Remove margin and padding so the inner UI will extend to the edge of the + window. 3rd party themes should typically specify the same values. */ +#updates { + margin: 0; + padding: 0; +} + +.update-header { + border-bottom: 2px groove ThreeDFace; + background-color: Window; + color: WindowText; + padding: 0 10px; +} + +.update-header-box-1 { + padding: 5px 0; +} + +.update-header-label { + font-weight: bold; +} + +#update-button-box { + margin: 0; + padding: 5px 10px 10px; +} + +.update-content { + padding: 10px; +} + +.update-buttons-separator { + margin-block: 0 !important; +} + +#updateFinishedName { + font-weight: bold; + font-size: larger; +} + +/* Update History Window */ +update { + border-bottom: 1px dotted #C0C0C0; +} + +.update-name { + font-weight: bold; +} + +.update-label-column { + -moz-box-align: end; +} + +.update-type { + font-weight: bold; + color: #990000; +} + +.update-status-value, +.update-installedOn-value { + margin-inline-start: 1ch; +} + +#historyItems { + height: 200px; + margin: 1px 5px; +} + +#historyItems .update { + padding: 5px; + display: -moz-box; + -moz-box-orient: vertical; +} + +.update-name { + -moz-box-flex: 1; +} diff --git a/toolkit/themes/windows/mozapps/viewsource/viewsource.css b/toolkit/themes/windows/mozapps/viewsource/viewsource.css new file mode 100644 index 0000000000..76c7d00b9d --- /dev/null +++ b/toolkit/themes/windows/mozapps/viewsource/viewsource.css @@ -0,0 +1,5 @@ +/* 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/. */ + +/* This is for styling the menus of the viewsource window */ |
