diff options
Diffstat (limited to 'toolkit/themes')
42 files changed, 1696 insertions, 978 deletions
diff --git a/toolkit/themes/linux/global/global.css b/toolkit/themes/linux/global/global.css index 1f9e7e458..9328f7a66 100644 --- a/toolkit/themes/linux/global/global.css +++ b/toolkit/themes/linux/global/global.css @@ -316,6 +316,7 @@ popupnotificationcontent { /* :::::: Close button icons ::::: */ +%ifdef MOZ_AUSTRALIS .close-icon { -moz-appearance: none; height: 16px; @@ -332,3 +333,8 @@ popupnotificationcontent { .close-icon:hover:active { background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32); } +%else +.close-icon { + list-style-image: url("moz-icon://stock/gtk-close?size=menu"); +} +%endif diff --git a/toolkit/themes/linux/global/icons/loading_16.png b/toolkit/themes/linux/global/icons/loading_16.png Binary files differnew file mode 100644 index 000000000..7108ea341 --- /dev/null +++ b/toolkit/themes/linux/global/icons/loading_16.png diff --git a/toolkit/themes/linux/global/icons/notloading_16.png b/toolkit/themes/linux/global/icons/notloading_16.png Binary files differnew file mode 100644 index 000000000..04dab30ed --- /dev/null +++ b/toolkit/themes/linux/global/icons/notloading_16.png diff --git a/toolkit/themes/linux/global/inContentUI.css b/toolkit/themes/linux/global/inContentUI.css new file mode 100644 index 000000000..afcef9274 --- /dev/null +++ b/toolkit/themes/linux/global/inContentUI.css @@ -0,0 +1,41 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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 namespace for this file is XUL. Be sure to prefix rules that + * are applicable to both XUL and HTML with '*|'. + */ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Page background */ +*|*:root { + -moz-appearance: none; + padding: 18px; + background-color: Window; + background-image: /* Texture */ + url("chrome://global/skin/inContentUI/background-texture.png"); + color: WindowText; +} + +/* Use the new in-content colors for #contentAreaDownloadsView. After landing + of bug 989469 the colors can be moved to *|*:root */ +*|*#contentAreaDownloadsView { + background: #f1f1f1; + color: #424e5a; +} + +html|html { + font: message-box; +} + +/* Content */ +*|*.main-content { + /* Needed to allow the radius to clip the inner content, see bug 595656 */ + overflow: hidden; + background-color: -moz-Field; + color: -moz-FieldText; + border: 1px solid ThreeDShadow; + border-radius: 5px; +} diff --git a/toolkit/themes/linux/global/jar.mn b/toolkit/themes/linux/global/jar.mn index b0d0b9ddb..b161f8cae 100644 --- a/toolkit/themes/linux/global/jar.mn +++ b/toolkit/themes/linux/global/jar.mn @@ -14,8 +14,9 @@ toolkit.jar: skin/classic/global/filepicker.css skin/classic/global/Filepicker.png (filepicker/Filepicker.png) skin/classic/global/findBar.css - skin/classic/global/global.css +* skin/classic/global/global.css skin/classic/global/groupbox.css + skin/classic/global/inContentUI.css skin/classic/global/listbox.css skin/classic/global/menu.css skin/classic/global/menulist.css @@ -44,6 +45,8 @@ toolkit.jar: skin/classic/global/icons/blacklist_large.png (icons/blacklist_large.png) skin/classic/global/icons/close.svg (icons/close.svg) skin/classic/global/icons/find.png (icons/find.png) + skin/classic/global/icons/loading_16.png (icons/loading_16.png) + skin/classic/global/icons/notloading_16.png (icons/notloading_16.png) skin/classic/global/icons/resizer.png (icons/resizer.png) skin/classic/global/icons/sslWarning.png (icons/sslWarning.png) diff --git a/toolkit/themes/osx/global/icons/loading_16.png b/toolkit/themes/osx/global/icons/loading_16.png Binary files differnew file mode 100644 index 000000000..1b2df8093 --- /dev/null +++ b/toolkit/themes/osx/global/icons/loading_16.png diff --git a/toolkit/themes/osx/global/icons/notloading_16.png b/toolkit/themes/osx/global/icons/notloading_16.png Binary files differnew file mode 100644 index 000000000..ece0ee18a --- /dev/null +++ b/toolkit/themes/osx/global/icons/notloading_16.png diff --git a/toolkit/themes/osx/global/inContentUI.css b/toolkit/themes/osx/global/inContentUI.css new file mode 100644 index 000000000..17e2e6ae3 --- /dev/null +++ b/toolkit/themes/osx/global/inContentUI.css @@ -0,0 +1,144 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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.inc + +/* + * The default namespace for this file is XUL. Be sure to prefix rules that + * are applicable to both XUL and HTML with '*|'. + */ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Page background */ +*|*:root { + -moz-appearance: none; + padding: 18px; + background-image: /* Texture */ + url("chrome://global/skin/inContentUI/background-texture.png"), + /* Gradient */ + linear-gradient(#ADB5C2, #BFC6D1); +} + +/* Use the new in-content colors for #contentAreaDownloadsView. After landing + of bug 989469 the colors can be moved to *|*:root */ +*|*#contentAreaDownloadsView { + background: #f1f1f1; + color: #424e5a; +} + +html|html { + font: message-box; +} + +/* Content */ +*|*.main-content { + /* Needed to allow the radius to clip the inner content, see bug 595656 */ + overflow: hidden; + background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.05)); + border: 1px solid rgba(50, 65, 92, 0.4); + border-radius: 5px; +} + +/* Buttons */ +*|button, +menulist, +colorpicker[type="button"] { + -moz-appearance: none; + padding: 1px 4px; + min-width: 60px; + border-radius: 3px; + border: 1px solid rgba(60,73,97,0.5); + box-shadow: inset 0 1px rgba(255,255,255,0.25), 0 1px rgba(255,255,255,0.25); + background-color: transparent; + background-image: linear-gradient(rgba(255,255,255,0.45), rgba(255,255,255,0.2)); + background-clip: padding-box; + color: #252F3B; + text-shadow: @loweredShadow@; +} + +button:-moz-focusring > .button-box, +menulist:-moz-focusring:not([open="true"]) > .menulist-label-box, +colorpicker[type="button"]:-moz-focusring:not([open="true"]) > .colorpicker-button-colorbox { + outline: 1px dotted #252F3B; +} + +html|button[disabled], +button[disabled="true"], +menulist[disabled="true"], +colorpicker[type="button"][disabled="true"] { + opacity: 0.8; + color: #505050; +} + +html|button:not([disabled]):active:hover, +button:not([disabled="true"]):active:hover, +menulist[open="true"]:not([disabled="true"]), +colorpicker[type="button"][open="true"]:not([disabled="true"]) { + box-shadow: inset 0 1px 3px rgba(0,0,0,.2), 0 1px rgba(255,255,255,0.25); + background-image: linear-gradient(rgba(45,54,71,0.3), rgba(45,54,71,0.1)); + border-color: rgba(60,73,97,0.7); +} + +menulist { + -moz-padding-end: 0; + margin-left: 5px; + margin-right: 5px; +} + +/* Tweak margins so the focus ring is in the right place. */ +menulist > .menulist-label-box { + -moz-margin-end: 3px; + margin-top: 1px; +} + +menulist > .menulist-label-box > .menulist-label { + margin-top: 0px !important; + margin-bottom: 0px !important; +} + +menulist > .menulist-dropmarker { + -moz-appearance: none; + display: -moz-box; + background: transparent; + border: none; + -moz-border-start: 1px solid rgba(60,73,97,0.5); + margin-top: -1px; + margin-bottom: -1px; +} + +colorpicker[type="button"] { + margin: 1px 5px 2px 5px; + padding: 3px; + height: 25px; +} + +spinbuttons { + -moz-appearance: none; +} + +spinbuttons > .spinbuttons-box > .spinbuttons-button { + min-width: 12px; +} + +.spinbuttons-button > .button-box > .button-text { + display: none; +} + +.spinbuttons-button[disabled="true"] > .button-box > .button-icon { + opacity: 0.5; +} + +spinbuttons > .spinbuttons-box > .spinbuttons-up { + list-style-image: url("chrome://global/skin/arrow/arrow-up.gif"); + border-bottom-width: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +spinbuttons > .spinbuttons-box > .spinbuttons-down { + list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif"); + border-top-left-radius: 0; + border-top-right-radius: 0; +} diff --git a/toolkit/themes/osx/global/jar.mn b/toolkit/themes/osx/global/jar.mn index 79bb062ab..2b7d19641 100644 --- a/toolkit/themes/osx/global/jar.mn +++ b/toolkit/themes/osx/global/jar.mn @@ -21,6 +21,7 @@ toolkit.jar: * skin/classic/global/findBar.css * skin/classic/global/global.css skin/classic/global/groupbox.css +* skin/classic/global/inContentUI.css skin/classic/global/linkTree.css skin/classic/global/listbox.css skin/classic/global/menu.css @@ -100,8 +101,10 @@ toolkit.jar: skin/classic/global/icons/information-32.png (icons/information-32.png) skin/classic/global/icons/information-64.png (icons/information-64.png) skin/classic/global/icons/information-large.png (icons/information-large.png) + skin/classic/global/icons/loading_16.png (icons/loading_16.png) skin/classic/global/icons/menulist-dropmarker.png (icons/menulist-dropmarker.png) skin/classic/global/icons/notfound.png (icons/notfound.png) + skin/classic/global/icons/notloading_16.png (icons/notloading_16.png) skin/classic/global/icons/panebutton-active.png (icons/panebutton-active.png) skin/classic/global/icons/panebutton-inactive.png (icons/panebutton-inactive.png) skin/classic/global/icons/panel-dropmarker.png (icons/panel-dropmarker.png) diff --git a/toolkit/themes/shared/aboutReader.css b/toolkit/themes/shared/aboutReader.css index 49436de84..4dbf11f6d 100644 --- a/toolkit/themes/shared/aboutReader.css +++ b/toolkit/themes/shared/aboutReader.css @@ -2,23 +2,13 @@ * License, v. 2.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. */ + body { padding: 64px 51px; } -@media print { - #container { - max-width: 100% !important; - font-size: 14px !important; - font-family: Georgia, "Times New Roman", serif !important; - } - - body { - padding-top: 0px; - padding-bottom: 0px; - } -} - body.loaded { transition: color 0.4s, background-color 0.4s; } @@ -56,80 +46,80 @@ body.serif .remove-button { font-family: Georgia, "Times New Roman", serif; } -#container { +.container { max-width: 30em; margin: 0 auto; } -#container.font-size1 { +.container.font-size1 { font-size: 12px; } -#container.font-size2 { +.container.font-size2 { font-size: 14px; } -#container.font-size3 { +.container.font-size3 { font-size: 16px; } -#container.font-size4 { +.container.font-size4 { font-size: 18px; } -#container.font-size5 { +.container.font-size5 { font-size: 20px; } -#container.font-size6 { +.container.font-size6 { font-size: 22px; } -#container.font-size7 { +.container.font-size7 { font-size: 24px; } -#container.font-size8 { +.container.font-size8 { font-size: 26px; } -#container.font-size9 { +.container.font-size9 { font-size: 28px; } -#container.content-width1 { +.container.content-width1 { max-width: 20em; } -#container.content-width2 { +.container.content-width2 { max-width: 25em; } -#container.content-width3 { +.container.content-width3 { max-width: 30em; } -#container.content-width4 { +.container.content-width4 { max-width: 35em; } -#container.content-width5 { +.container.content-width5 { max-width: 40em; } -#container.content-width6 { +.container.content-width6 { max-width: 45em; } -#container.content-width7 { +.container.content-width7 { max-width: 50em; } -#container.content-width8 { +.container.content-width8 { max-width: 55em; } -#container.content-width9 { +.container.content-width9 { max-width: 60em; } @@ -176,3 +166,575 @@ body:not(.loaded) .toolbar:-moz-locale-dir(ltr) { body:not(.loaded) .toolbar:-moz-locale-dir(rtl) { transform: translateX(100%); } + +.light-button { + color: #333333; + background-color: #ffffff; +} + +.dark-button { + color: #eeeeee; + background-color: #333333; +} + +.sepia-button { + color: #5b4636; + background-color: #f4ecd8; +} + +.sans-serif-button { + font-family: Helvetica, Arial, sans-serif; +} + +.serif-button { + font-family: Georgia, "Times New Roman", serif; +} + +/* Loading/error message */ + +.reader-message { + margin-top: 40px; + display: none; + text-align: center; + width: 100%; + font-size: 0.9em; +} + +/* 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: #0095dd; +} + +.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 0; + padding: 0; + font-style: italic; +} + +.header > .meta-data { + font-size: 0.65em; + margin: 0 0 15px 0; +} + +/*======= Controls toolbar =======*/ + +.toolbar { + font-family: Helvetica, Arial, sans-serif; + position: fixed; + height: 100%; + top: 0; + left: 0; + margin: 0; + padding: 0; + list-style: none; + background-color: #fbfbfb; + -moz-user-select: none; + border-right: 1px solid #b5b5b5; + z-index: 1; +} + +.button { + display: block; + background-size: 24px 24px; + background-repeat: no-repeat; + color: #333; + background-color: #fbfbfb; + height: 40px; + padding: 0; +} + +.toolbar .button { + width: 40px; + background-position: center; + margin-right: -1px; + border-top: 0; + border-left: 0; + border-right: 1px solid #b5b5b5; + border-bottom: 1px solid #c1c1c1; +} + +.button[hidden] { + display: none; +} + +.dropdown { + text-align: center; + list-style: none; + margin: 0; + padding: 0; +} + +.dropdown li { + margin: 0; + padding: 0; +} + +/*======= Popup =======*/ + +.dropdown-popup { + min-width: 300px; + text-align: start; + position: absolute; + left: 48px; /* offset to account for toolbar width */ + z-index: 1000; + background-color: #fbfbfb; + visibility: hidden; + border-radius: 4px; + border: 1px solid #b5b5b5; + border-bottom-width: 0; + box-shadow: 0 1px 3px #c1c1c1; +} + +.keep-open .dropdown-popup { + z-index: initial; +} + +.dropdown-popup > hr { + display: none; +} + +.open > .dropdown-popup { + visibility: visible; +} + +.dropdown-arrow { + position: absolute; + top: 30px; /* offset arrow from top of popup */ + left: -16px; + width: 16px; + height: 24px; + background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); + display: block; +} + +/*======= Font style popup =======*/ + +.font-type-buttons, +.font-size-buttons, +.color-scheme-buttons, +.content-width-buttons, +.line-height-buttons { + display: flex; + flex-direction: row; +} + +.font-type-buttons > button:first-child { + border-top-left-radius: 3px; +} +.font-type-buttons > button:last-child { + border-top-right-radius: 3px; +} +.color-scheme-buttons > button:first-child { + border-bottom-left-radius: 3px; +} +.color-scheme-buttons > button:last-child { + border-bottom-right-radius: 3px; +} + +.font-type-buttons > button, +.font-size-buttons > button, +.color-scheme-buttons > button, +.content-width-buttons > button, +.line-height-buttons > button { + text-align: center; + border: 0; +} + +.font-type-buttons > button, +.font-size-buttons > button, +.content-width-buttons > button, +.line-height-buttons > button { + width: 50%; + background-color: transparent; + border-left: 1px solid #B5B5B5; + border-bottom: 1px solid #B5B5B5; +} + +.color-scheme-buttons > button { + width: 33.33%; + font-size: 14px; +} + +.color-scheme-buttons > .dark-button { + margin-top: -1px; + height: 61px; +} + +.font-type-buttons > button:first-child, +.font-size-buttons > button:first-child, +.content-width-buttons > button:first-child, +.line-height-buttons > button:first-child { + border-left: 0; +} + +.font-type-buttons > button { + display: inline-block; + font-size: 62px; + height: 100px; +} + +.font-size-buttons > button, +.color-scheme-buttons > button, +.content-width-buttons > button, +.line-height-buttons > button { + height: 60px; +} + +.font-type-buttons > button:active:hover, +.font-type-buttons > button.selected, +.color-scheme-buttons > button:active:hover, +.color-scheme-buttons > button.selected { + box-shadow: inset 0 -3px 0 0 #fc6420; +} + +.font-type-buttons > button:active:hover, +.font-type-buttons > button.selected { + border-bottom: 1px solid #FC6420; +} + +/* Make the serif button content the same size as the sans-serif button content. */ +.font-type-buttons > button > .description { + color: #666; + font-size: 12px; + margin-top: -5px; +} + +/* Font sizes are different per-platform, so we need custom CSS to line them up. */ +%ifdef XP_MACOSX +.font-type-buttons > .sans-serif-button > .name { + margin-top: 10px; +} + +.font-type-buttons > .sans-serif-button > .description { + margin-top: -4px; +} + +.font-type-buttons > .serif-button > .name { + font-size: 63px; +} +%elifdef XP_WIN +.font-type-buttons > .sans-serif-button > .name { + margin-top: 2px; +} + +.font-type-buttons > .sans-serif-button > .description { + margin-top: -4px; +} + +.font-type-buttons > .serif-button > .name { + font-size: 63px; +} +%else +.font-type-buttons > .sans-serif-button > .name { + margin-top: 5px; +} + +.font-type-buttons > .sans-serif-button > .description { + margin-top: -8px; +} + +.font-type-buttons > .serif-button > .name { + font-size: 70px; +} +%endif + +.button:hover, +.font-size-buttons > button:hover, +.font-type-buttons > button:hover, +.content-width-buttons > button:hover, +.line-height-buttons > button:hover { + background-color: #ebebeb; +} + +.dropdown.open, +.button:active, +.font-size-buttons > button:active, +.font-size-buttons > button.selected, +.content-width-buttons > button:active, +.content-width-buttons > button.selected, +.line-height-buttons > button:active, +.line-height-buttons > button.selected { + background-color: #dadada; +} + +/* Only used on Android */ +.font-size-sample { + display: none; +} + +.minus-button, +.plus-button, +.content-width-minus-button, +.content-width-plus-button, +.line-height-minus-button, +.line-height-plus-button { + background-color: transparent; + border: 0; + background-size: 18px 18px; + background-repeat: no-repeat; + background-position: center; +} + +/*======= Toolbar icons =======*/ + +.close-button { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close"); + height: 68px; + background-position: center 8px; +} + +.close-button:hover { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); + background-color: #d94141; + border-bottom: 1px solid #d94141; + border-right: 1px solid #d94141; +} + +.close-button:hover:active { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); + background-color: #AE2325; + border-bottom: 1px solid #AE2325; + border-right: 1px solid #AE2325; +} + +.style-button { + background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); +} + +.minus-button { + background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); +} + +.plus-button { + 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"); +} + +@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; + line-height: 1.6em; +} + +.moz-reader-content.line-height1 { + line-height: 1em; +} + +.moz-reader-content.line-height2 { + line-height: 1.2em; +} + +.moz-reader-content.line-height3 { + line-height: 1.4em; +} + +.moz-reader-content.line-height4 { + line-height: 1.6em; +} + +.moz-reader-content.line-height5 { + line-height: 1.8em; +} + +.moz-reader-content.line-height6 { + line-height: 2.0em; +} + +.moz-reader-content.line-height7 { + line-height: 2.2em; +} + +.moz-reader-content.line-height8 { + line-height: 2.4em; +} + +.moz-reader-content.line-height9 { + line-height: 2.6em; +} + +@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 0 !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: #0095dd; +} + +.moz-reader-content a:visited { + color: #c2e; +} + +.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 -10px; + 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-left: auto; + margin-right: 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; +} + +/* Hide elements with common "hidden" class names */ +.moz-reader-content .visually-hidden, +.moz-reader-content .visuallyhidden, +.moz-reader-content .hidden, +.moz-reader-content .invisible, +.moz-reader-content .sr-only { + display: none; +} diff --git a/toolkit/themes/shared/aboutReaderContent.css b/toolkit/themes/shared/aboutReaderContent.css deleted file mode 100644 index 633391d37..000000000 --- a/toolkit/themes/shared/aboutReaderContent.css +++ /dev/null @@ -1,177 +0,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/. */ - -#moz-reader-content { - display: none; - font-size: 1em; - line-height: 1.6em; -} - -#moz-reader-content.line-height1 { - line-height: 1em; -} - -#moz-reader-content.line-height2 { - line-height: 1.2em; -} - -#moz-reader-content.line-height3 { - line-height: 1.4em; -} - -#moz-reader-content.line-height4 { - line-height: 1.6em; -} - -#moz-reader-content.line-height5 { - line-height: 1.8em; -} - -#moz-reader-content.line-height6 { - line-height: 2.0em; -} - -#moz-reader-content.line-height7 { - line-height: 2.2em; -} - -#moz-reader-content.line-height8 { - line-height: 2.4em; -} - -#moz-reader-content.line-height9 { - line-height: 2.6em; -} - -@media print { - p, - code, - pre, - blockquote, - ul, - ol, - li, - figure, - .wp-caption { - margin: 0 0 10px 0 !important; - } -} - -h1, -h2, -h3 { - font-weight: bold; -} - -h1 { - font-size: 1.6em; - line-height: 1.25em; -} - -h2 { - font-size: 1.2em; - line-height: 1.51em; -} - -h3 { - font-size: 1em; - line-height: 1.66em; -} - -a:link { - text-decoration: underline; - font-weight: normal; -} - -a:link, -a:link:hover, -a:link:active { - color: #0095dd; -} - -a:visited { - color: #c2e; -} - -* { - max-width: 100%; - height: auto; -} - -p, -code, -pre, -blockquote, -ul, -ol, -li, -figure, -.wp-caption { - margin: -10px -10px 20px -10px; - padding: 10px; - border-radius: 5px; -} - -li { - margin-bottom: 0; -} - -li > ul, -li > ol { - margin-bottom: -10px; -} - -p > img:only-child, -p > a:only-child > img:only-child, -.wp-caption img, -figure img { - display: block; -} - -img[moz-reader-center] { - margin-left: auto; - margin-right: auto; -} - -.caption, -.wp-caption-text, -figcaption { - font-size: 0.9em; - line-height: 1.48em; - font-style: italic; -} - -code, -pre { - white-space: pre-wrap; -} - -blockquote { - padding: 0; - padding-inline-start: 16px; -} - -ul, -ol { - padding: 0; -} - -ul { - padding-inline-start: 30px; - list-style: disc; -} - -ol { - padding-inline-start: 30px; - list-style: decimal; -} - -/* Hide elements with common "hidden" class names */ -.visually-hidden, -.visuallyhidden, -.hidden, -.invisible, -.sr-only { - display: none; -} diff --git a/toolkit/themes/shared/aboutReaderControls.css b/toolkit/themes/shared/aboutReaderControls.css deleted file mode 100644 index afd65f458..000000000 --- a/toolkit/themes/shared/aboutReaderControls.css +++ /dev/null @@ -1,388 +0,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/. */ - -.light-button { - color: #333333; - background-color: #ffffff; -} - -.dark-button { - color: #eeeeee; - background-color: #333333; -} - -.sepia-button { - color: #5b4636; - background-color: #f4ecd8; -} - -.sans-serif-button { - font-family: Helvetica, Arial, sans-serif; -} - -.serif-button { - font-family: Georgia, "Times New Roman", serif; -} - -/* Loading/error message */ - -#reader-message { - margin-top: 40px; - display: none; - text-align: center; - width: 100%; - font-size: 0.9em; -} - -/* 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: #0095dd; -} - -.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 30px 0; - padding: 0; - font-style: italic; -} - -/*======= Controls toolbar =======*/ - -.toolbar { - font-family: Helvetica, Arial, sans-serif; - position: fixed; - height: 100%; - top: 0; - left: 0; - margin: 0; - padding: 0; - list-style: none; - background-color: #fbfbfb; - -moz-user-select: none; - border-right: 1px solid #b5b5b5; - z-index: 1; -} - -.button { - display: block; - background-size: 24px 24px; - background-repeat: no-repeat; - color: #333; - background-color: #fbfbfb; - height: 40px; - padding: 0; -} - -.toolbar .button { - width: 40px; - background-position: center; - margin-right: -1px; - border-top: 0; - border-left: 0; - border-right: 1px solid #b5b5b5; - border-bottom: 1px solid #c1c1c1; -} - -.button[hidden] { - display: none; -} - -.dropdown { - text-align: center; - list-style: none; - margin: 0; - padding: 0; -} - -.dropdown li { - margin: 0; - padding: 0; -} - -/*======= Popup =======*/ - -.dropdown-popup { - min-width: 300px; - text-align: start; - position: absolute; - left: 48px; /* offset to account for toolbar width */ - z-index: 1000; - background-color: #fbfbfb; - visibility: hidden; - border-radius: 4px; - border: 1px solid #b5b5b5; - border-bottom-width: 0; - box-shadow: 0 1px 12px #666; -} - -.keep-open .dropdown-popup { - z-index: initial; -} - -.dropdown-popup > hr { - display: none; -} - -.open > .dropdown-popup { - visibility: visible; -} - -.dropdown-arrow { - position: absolute; - top: 30px; /* offset arrow from top of popup */ - left: -16px; - width: 24px; - height: 24px; - background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); - display: block; -} - -/*======= Font style popup =======*/ - -#font-type-buttons, -#font-size-buttons, -#color-scheme-buttons, -#content-width-buttons, -#line-height-buttons { - display: flex; - flex-direction: row; -} - -#font-type-buttons > button:first-child { - border-top-left-radius: 3px; -} -#font-type-buttons > button:last-child { - border-top-right-radius: 3px; -} -#color-scheme-buttons > button:first-child { - border-bottom-left-radius: 3px; -} -#color-scheme-buttons > button:last-child { - border-bottom-right-radius: 3px; -} - -#font-type-buttons > button, -#font-size-buttons > button, -#color-scheme-buttons > button, -#content-width-buttons > button, -#line-height-buttons > button { - text-align: center; - border: 0; -} - -#font-type-buttons > button, -#font-size-buttons > button, -#content-width-buttons > button, -#line-height-buttons > button { - width: 50%; - background-color: transparent; - border-left: 1px solid #B5B5B5; - border-bottom: 1px solid #B5B5B5; -} - -#color-scheme-buttons > button { - width: 33.33%; - font-size: 14px; -} - -#color-scheme-buttons > .dark-button { - margin-top: -1px; - height: 61px; -} - -#font-type-buttons > button:first-child, -#font-size-buttons > button:first-child, -#content-width-buttons > button:first-child, -#line-height-buttons > button:first-child { - border-left: 0; -} - -#font-type-buttons > button { - display: inline-block; - font-size: 62px; - height: 100px; -} - -#font-size-buttons > button, -#color-scheme-buttons > button, -#content-width-buttons > button, -#line-height-buttons > button { - height: 60px; -} - -#font-type-buttons > button:active:hover, -#font-type-buttons > button.selected, -#color-scheme-buttons > button:active:hover, -#color-scheme-buttons > button.selected { - box-shadow: inset 0 -3px 0 0 #fc6420; -} - -#font-type-buttons > button:active:hover, -#font-type-buttons > button.selected { - border-bottom: 1px solid #FC6420; -} - -/* Make the serif button content the same size as the sans-serif button content. */ -#font-type-buttons > button > .description { - color: #666; - font-size: 12px; - margin-top: -5px; -} - -/* Font sizes are different per-platform, so we need custom CSS to line them up. */ -%ifdef XP_MACOSX -#font-type-buttons > .sans-serif-button > .name { - margin-top: 10px; -} - -#font-type-buttons > .sans-serif-button > .description { - margin-top: -4px; -} - -#font-type-buttons > .serif-button > .name { - font-size: 63px; -} -%elifdef XP_WIN -#font-type-buttons > .sans-serif-button > .name { - margin-top: 2px; -} - -#font-type-buttons > .sans-serif-button > .description { - margin-top: -4px; -} - -#font-type-buttons > .serif-button > .name { - font-size: 63px; -} -%else -#font-type-buttons > .sans-serif-button > .name { - margin-top: 5px; -} - -#font-type-buttons > .sans-serif-button > .description { - margin-top: -8px; -} - -#font-type-buttons > .serif-button > .name { - font-size: 70px; -} -%endif - -.button:hover, -#font-size-buttons > button:hover, -#font-type-buttons > button:hover, -#content-width-buttons > button:hover, -#line-height-buttons > button:hover { - background-color: #ebebeb; -} - -.dropdown.open, -.button:active, -#font-size-buttons > button:active, -#font-size-buttons > button.selected, -#content-width-buttons > button:active, -#content-width-buttons > button.selected, -#line-height-buttons > button:active, -#line-height-buttons > button.selected { - background-color: #dadada; -} - -/* Only used on Android */ -#font-size-sample { - display: none; -} - -.minus-button, -.plus-button, -.content-width-minus-button, -.content-width-plus-button, -.line-height-minus-button, -.line-height-plus-button { - background-color: transparent; - border: 0; - background-size: 18px 18px; - background-repeat: no-repeat; - background-position: center; -} - -/*======= Toolbar icons =======*/ - -.close-button { - background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close"); - height: 68px; - background-position: center 8px; -} - -.close-button:hover { - background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); - background-color: #d94141; - border-bottom: 1px solid #d94141; - border-right: 1px solid #d94141; -} - -.close-button:hover:active { - background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); - background-color: #AE2325; - border-bottom: 1px solid #AE2325; - border-right: 1px solid #AE2325; -} - -.style-button { - background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); -} - -.minus-button { - background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); -} - -.plus-button { - 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"); -} - -@media print { - .toolbar { - display: none !important; - } -} diff --git a/toolkit/themes/shared/aboutSupport.css b/toolkit/themes/shared/aboutSupport.css index d26cd3cbd..69e6a95b4 100644 --- a/toolkit/themes/shared/aboutSupport.css +++ b/toolkit/themes/shared/aboutSupport.css @@ -99,6 +99,10 @@ td { width: 30%; } +#contents { + clear: right; +} + #action-box, #reset-box, #safe-mode-box { diff --git a/toolkit/themes/shared/alert-common.css b/toolkit/themes/shared/alert-common.css index 010e89393..17510c0db 100644 --- a/toolkit/themes/shared/alert-common.css +++ b/toolkit/themes/shared/alert-common.css @@ -15,14 +15,12 @@ } #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; } diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css new file mode 100644 index 000000000..f0c4315e5 --- /dev/null +++ b/toolkit/themes/shared/datetimeinputpickers.css @@ -0,0 +1,377 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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 #D6D6D6; + --border-radius: 0.3rem; + --border-active-color: #B1B1B1; + + --font-color: #191919; + --fill-color: #EBEBEB; + + --today-fill-color: rgb(212, 212, 212); + + --selected-font-color: #FFFFFF; + --selected-fill-color: #0996F8; + + --button-font-color: #858585; + --button-font-color-hover: #4D4D4D; + --button-font-color-active: #191919; + --button-fill-color-active: #D4D4D4; + + --weekday-header-font-color: #6C6C6C; + --weekend-header-font-color: rgb(218, 78, 68); + + --weekend-font-color: rgb(218, 78, 68); + --weekday-outside-font-color: rgb(153, 153, 153); + --weekend-outside-font-color: rgb(255, 152, 143); + + --weekday-disabled-font-color: rgba(25, 25, 25, 0.2); + --weekend-disabled-font-color: rgba(218, 78, 68, 0.2); + --disabled-fill-color: rgba(235, 235, 235, 0.8); + + --disabled-opacity: 0.2; +} + +html { + font-size: 10px; +} + +body { + margin: 0; + color: var(--font-color); + font: message-box; + font-size: var(--font-size-default); +} + +button { + -moz-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); + background-color: var(--button-font-color); +} + +.nav > button:hover { + background-color: var(--button-font-color-hover); +} + +.nav > button.active { + background-color: var(--button-font-color-active); +} + +.nav > button.left { + background: url("chrome://global/skin/icons/calendar-arrows.svg#left") no-repeat 50% 50%; +} + +.nav > button.right { + background: url("chrome://global/skin/icons/calendar-arrows.svg#right") no-repeat 50% 50%; +} + +.month-year-container { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + top: 0; + left: 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: 0.2rem 2.6rem 0.2rem 1.2rem; +} + +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-arrows.svg#down") no-repeat 50% 50%; +} + +button.month-year.active::after { + background: url("chrome://global/skin/icons/spinner-arrows.svg#up") 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; +} + +.calendar-container { + cursor: default; + display: flex; + flex-direction: column; + width: var(--calendar-width); +} + +.week-header { + display: flex; +} + +.week-header > div { + color: var(--weekday-header-font-color); +} + +.week-header > div.weekend { + color: var(--weekend-header-font-color); +} + +.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 { + color: var(--weekday-outside-font-color); +} + +.days-view > .weekend { + color: var(--weekend-font-color); +} + +.days-view > .weekend.outside { + color: var(--weekend-outside-font-color); +} + +.days-view > .out-of-range, +.days-view > .off-step { + color: var(--weekday-disabled-font-color); + background: var(--disabled-fill-color); +} + +.days-view > .out-of-range.weekend, +.days-view > .off-step.weekend { + color: var(--weekend-disabled-font-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 { + top: 5%; + bottom: 5%; + left: 5%; + right: 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 { + background-color: var(--button-font-color); + height: var(--spinner-button-height); +} + +.spinner-container > button:hover { + background-color: var(--button-font-color-hover); +} + +.spinner-container > button.active { + background-color: var(--button-font-color-active); +} + +.spinner-container > button.up { + background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%; +} + +.spinner-container > button.down { + background: url("chrome://global/skin/icons/spinner-arrows.svg#down") 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: mandatory; + scroll-snap-points-y: repeat(100%); +} + +.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); + -moz-user-select: none; + scroll-snap-coordinate: 0 0; +} + +.spinner-container > .spinner > div::before, +.calendar-container .days-view > div::before { + position: absolute; + top: 5%; + bottom: 5%; + left: 5%; + right: 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); +}
\ No newline at end of file diff --git a/toolkit/themes/shared/datetimepopup.css b/toolkit/themes/shared/datetimepopup.css new file mode 100644 index 000000000..52f6fc7a2 --- /dev/null +++ b/toolkit/themes/shared/datetimepopup.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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +panel[type="arrow"][side="top"], +panel[type="arrow"][side="bottom"] { + margin-left: 0; + margin-right: 0; +} diff --git a/toolkit/themes/shared/extensions/alerticon-error.svg b/toolkit/themes/shared/extensions/alerticon-error.svg new file mode 100644 index 000000000..cb883e16e --- /dev/null +++ b/toolkit/themes/shared/extensions/alerticon-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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 18 18">
+ <path fill="#e62117" d="M10.124,1.324l7.705,14.127c0.234,0.421,0.228,0.843-0.019,1.264c-0.114,0.193-0.271,0.347-0.467,0.461c-0.198,0.114-0.41,0.171-0.638,0.171H1.294c-0.228,0-0.44-0.057-0.636-0.171c-0.198-0.114-0.353-0.268-0.467-0.461c-0.247-0.421-0.254-0.843-0.02-1.264L7.876,1.324C7.99,1.117,8.147,0.953,8.348,0.833C8.548,0.712,8.766,0.652,9,0.652c0.234,0,0.451,0.06,0.652,0.181C9.853,0.953,10.009,1.117,10.124,1.324z M10.264,10.695l0.181-4.605c0-0.08-0.034-0.143-0.1-0.191c-0.087-0.073-0.168-0.11-0.241-0.11H7.896c-0.073,0-0.154,0.037-0.241,0.11c-0.067,0.048-0.1,0.118-0.1,0.211l0.17,4.586c0,0.067,0.034,0.122,0.1,0.165c0.067,0.044,0.147,0.065,0.241,0.065h1.856c0.094,0,0.172-0.021,0.236-0.065C10.222,10.818,10.258,10.762,10.264,10.695z M10.284,14.448v-1.907c0-0.094-0.031-0.172-0.095-0.236c-0.064-0.064-0.139-0.095-0.225-0.095H8.036c-0.087,0-0.162,0.031-0.225,0.095c-0.064,0.064-0.095,0.142-0.095,0.236v1.907c0,0.094,0.031,0.173,0.095,0.236c0.064,0.064,0.138,0.095,0.225,0.095h1.927c0.086,0,0.162-0.031,0.225-0.095C10.252,14.621,10.284,14.542,10.284,14.448z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/alerticon-info-negative.svg b/toolkit/themes/shared/extensions/alerticon-info-negative.svg new file mode 100644 index 000000000..733f8571a --- /dev/null +++ b/toolkit/themes/shared/extensions/alerticon-info-negative.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 18 18">
+ <path fill="#828282" d="M10.124,1.324l7.705,14.127c0.234,0.421,0.228,0.843-0.019,1.264c-0.114,0.193-0.271,0.347-0.467,0.461c-0.198,0.114-0.41,0.171-0.638,0.171H1.294c-0.228,0-0.44-0.057-0.636-0.171c-0.198-0.114-0.353-0.268-0.467-0.461c-0.247-0.421-0.254-0.843-0.02-1.264L7.876,1.324C7.99,1.117,8.147,0.953,8.348,0.833C8.548,0.712,8.766,0.652,9,0.652c0.234,0,0.451,0.06,0.652,0.181C9.853,0.953,10.009,1.117,10.124,1.324z M10.264,10.695l0.181-4.605c0-0.08-0.034-0.143-0.1-0.191c-0.087-0.073-0.168-0.11-0.241-0.11H7.896c-0.073,0-0.154,0.037-0.241,0.11c-0.067,0.048-0.1,0.118-0.1,0.211l0.17,4.586c0,0.067,0.034,0.122,0.1,0.165c0.067,0.044,0.147,0.065,0.241,0.065h1.856c0.094,0,0.172-0.021,0.236-0.065C10.222,10.818,10.258,10.762,10.264,10.695z M10.284,14.448v-1.907c0-0.094-0.031-0.172-0.095-0.236c-0.064-0.064-0.139-0.095-0.225-0.095H8.036c-0.087,0-0.162,0.031-0.225,0.095c-0.064,0.064-0.095,0.142-0.095,0.236v1.907c0,0.094,0.031,0.173,0.095,0.236c0.064,0.064,0.138,0.095,0.225,0.095h1.927c0.086,0,0.162-0.031,0.225-0.095C10.252,14.621,10.284,14.542,10.284,14.448z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/alerticon-info-positive.svg b/toolkit/themes/shared/extensions/alerticon-info-positive.svg new file mode 100644 index 000000000..031190bce --- /dev/null +++ b/toolkit/themes/shared/extensions/alerticon-info-positive.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 18 18">
+ <path fill="#62c44e" d="M18,4.796c0,0.31-0.109,0.573-0.325,0.79l-8.408,8.406l-1.579,1.58c-0.217,0.217-0.48,0.325-0.789,0.325c-0.31,0-0.573-0.108-0.79-0.325l-1.579-1.58L0.325,9.79C0.108,9.573,0,9.31,0,9s0.108-0.573,0.325-0.79l1.58-1.579c0.216-0.217,0.479-0.325,0.789-0.325s0.573,0.108,0.79,0.325l3.414,3.426l7.617-7.63c0.217-0.216,0.48-0.325,0.79-0.325c0.309,0,0.572,0.109,0.789,0.325l1.58,1.58C17.891,4.224,18,4.487,18,4.796z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/alerticon-warning.svg b/toolkit/themes/shared/extensions/alerticon-warning.svg new file mode 100644 index 000000000..2b403220e --- /dev/null +++ b/toolkit/themes/shared/extensions/alerticon-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 18 18">
+ <path fill="#f0cd2f" d="M10.124,1.324l7.705,14.127c0.234,0.421,0.228,0.843-0.019,1.264c-0.114,0.193-0.271,0.347-0.467,0.461c-0.198,0.114-0.41,0.171-0.638,0.171H1.294c-0.228,0-0.44-0.057-0.636-0.171c-0.198-0.114-0.353-0.268-0.467-0.461c-0.247-0.421-0.254-0.843-0.02-1.264L7.876,1.324C7.99,1.117,8.147,0.953,8.348,0.833C8.548,0.712,8.766,0.652,9,0.652c0.234,0,0.451,0.06,0.652,0.181C9.853,0.953,10.009,1.117,10.124,1.324z M10.264,10.695l0.181-4.605c0-0.08-0.034-0.143-0.1-0.191c-0.087-0.073-0.168-0.11-0.241-0.11H7.896c-0.073,0-0.154,0.037-0.241,0.11c-0.067,0.048-0.1,0.118-0.1,0.211l0.17,4.586c0,0.067,0.034,0.122,0.1,0.165c0.067,0.044,0.147,0.065,0.241,0.065h1.856c0.094,0,0.172-0.021,0.236-0.065C10.222,10.818,10.258,10.762,10.264,10.695z M10.284,14.448v-1.907c0-0.094-0.031-0.172-0.095-0.236c-0.064-0.064-0.139-0.095-0.225-0.095H8.036c-0.087,0-0.162,0.031-0.225,0.095c-0.064,0.064-0.095,0.142-0.095,0.236v1.907c0,0.094,0.031,0.173,0.095,0.236c0.064,0.064,0.138,0.095,0.225,0.095h1.927c0.086,0,0.162-0.031,0.225-0.095C10.252,14.621,10.284,14.542,10.284,14.448z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/extensionGeneric.svg b/toolkit/themes/shared/extensions/extensionGeneric.svg new file mode 100644 index 000000000..28c2f7ba3 --- /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/utilities.svg b/toolkit/themes/shared/extensions/utilities.svg index fd911001b..8bf24458c 100644 --- a/toolkit/themes/shared/extensions/utilities.svg +++ b/toolkit/themes/shared/extensions/utilities.svg @@ -1,11 +1,8 @@ <?xml version="1.0" encoding="utf-8"?> -<svg xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink" - x="0" - y="0" - width="16" - height="16" - viewBox="0 0 16 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> <style> use:not(:target) { display: none; @@ -16,10 +13,18 @@ use[id$="-native"] { fill: GrayText; } + use[id$="-grayscale"] { + fill: #4d4d4d; + } + use[id$="-inverted"] { + fill: #ddd; + } </style> - <defs style="display: none;"> + <defs> <path id="utilities-shape" d="m11.5,13.9l-.6-1.5c.3-.2 .5-.4 .8-.6 .2-.2 .4-.5 .6-.7l1.5,.6c.3,.1 .6,0 .7-.3l.4-1c.1-.3 0-.6-.3-.7l-1.5-.6c.1-.6 .1-1.3 0-2l1.5-.6c.3-.1 .4-.4 .3-.7l-.4-1c-.1-.3-.4-.4-.7-.3l-1.5,.6c-.2-.3-.4-.5-.6-.8-.2-.1-.5-.3-.7-.5l.6-1.5c.1-.3 0-.6-.3-.7l-.9-.4c-.3-.1-.6,0-.7,.3l-.6,1.5c-.6-.1-1.3-.1-2,0l-.6-1.5c-.1-.3-.4-.4-.7-.3l-1,.4c-.2,.1-.3,.4-.2,.6l.6,1.5c-.3,.3-.5,.5-.8,.7-.2,.3-.4,.5-.6,.8l-1.5-.7c-.3-.1-.6,0-.7,.3l-.4,.9c-.1,.3 0,.6 .3,.7l1.5,.7c-.1,.6-.1,1.3 0,1.9l-1.5,.6c-.3,.1-.4,.4-.3,.7l.4,1c.1,.3 .4,.4 .7,.3l1.5-.6c.2,.3 .4,.5 .6,.8 .2,.2 .5,.4 .7,.6l-.6,1.5c-.1,.3 0,.6 .3,.7l1,.4c.3,.1 .6,0 .7-.3l.6-1.5c.6,.1 1.3,.1 2,0l.6,1.5c.1,.3 .4,.4 .7,.3l1-.4c.1-.1 .3-.4 .1-.7zm-5.1-4.2c-.9-.9-.9-2.4 0-3.3 .9-.9 2.4-.9 3.3,0 .9,.9 .9,2.4 0,3.3-.9,.9-2.4,.9-3.3,0z"/> </defs> <use id="utilities" xlink:href="#utilities-shape"/> <use id="utilities-native" xlink:href="#utilities-shape"/> + <use id="utilities-grayscale" xlink:href="#utilities-shape"/> + <use id="utilities-inverted" xlink:href="#utilities-shape"/> </svg> diff --git a/toolkit/themes/shared/icons/calendar-arrows.svg b/toolkit/themes/shared/icons/calendar-arrows.svg new file mode 100644 index 000000000..858676f55 --- /dev/null +++ b/toolkit/themes/shared/icons/calendar-arrows.svg @@ -0,0 +1,13 @@ +<?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="14" height="14" viewBox="0 0 14 14"> + <style> + path:not(:target) { + display: none; + } + </style> + <path id="right" d="M4.8 14L3 12.3 8.5 7 3 1.7 4.8 0 12 7"/> + <path id="left" d="M9.2 0L11 1.7 5.5 7 11 12.3 9.2 14 2 7"/> +</svg> diff --git a/toolkit/themes/shared/icons/spinner-arrows.svg b/toolkit/themes/shared/icons/spinner-arrows.svg new file mode 100644 index 000000000..a8ba72d6b --- /dev/null +++ b/toolkit/themes/shared/icons/spinner-arrows.svg @@ -0,0 +1,13 @@ +<?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="10" height="6" viewBox="0 0 10 6"> + <style> + path:not(:target) { + display: none; + } + </style> + <path id="down" d="M0 1l1-1 4 4 4-4 1 1-5 5"/> + <path id="up" d="M0 5l1 1 4-4 4 4 1-1-5-5"/> +</svg> diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn index 9c3d86a40..e361e744f 100644 --- a/toolkit/themes/shared/jar.inc.mn +++ b/toolkit/themes/shared/jar.inc.mn @@ -15,23 +15,23 @@ toolkit.jar: skin/classic/global/aboutCache.css (../../shared/aboutCache.css) skin/classic/global/aboutCacheEntry.css (../../shared/aboutCacheEntry.css) skin/classic/global/aboutMemory.css (../../shared/aboutMemory.css) - skin/classic/global/aboutReader.css (../../shared/aboutReader.css) - skin/classic/global/aboutReaderContent.css (../../shared/aboutReaderContent.css) -* skin/classic/global/aboutReaderControls.css (../../shared/aboutReaderControls.css) +* skin/classic/global/aboutReader.css (../../shared/aboutReader.css) skin/classic/global/aboutSupport.css (../../shared/aboutSupport.css) skin/classic/global/appPicker.css (../../shared/appPicker.css) skin/classic/global/config.css (../../shared/config.css) - skin/classic/global/timepicker.css (../../shared/timepicker.css) + skin/classic/global/datetimeinputpickers.css (../../shared/datetimeinputpickers.css) + skin/classic/global/datetimepopup.css (../../shared/datetimepopup.css) + skin/classic/global/icons/calendar-arrows.svg (../../shared/icons/calendar-arrows.svg) skin/classic/global/icons/find-arrows.svg (../../shared/icons/find-arrows.svg) skin/classic/global/icons/info.svg (../../shared/incontent-icons/info.svg) skin/classic/global/icons/input-clear.svg (../../shared/icons/input-clear.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/spinner-arrows.svg (../../shared/icons/spinner-arrows.svg) skin/classic/global/icons/warning.svg (../../shared/incontent-icons/warning.svg) skin/classic/global/icons/blocked.svg (../../shared/incontent-icons/blocked.svg) skin/classic/global/alerts/alert-common.css (../../shared/alert-common.css) skin/classic/global/narrate.css (../../shared/narrate.css) - skin/classic/global/narrateControls.css (../../shared/narrateControls.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) @@ -59,7 +59,7 @@ toolkit.jar: 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/media/TopLevelImageDocument.css (../../shared/media/TopLevelImageDocument.css) +* 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) diff --git a/toolkit/themes/shared/media/TopLevelImageDocument.css b/toolkit/themes/shared/media/TopLevelImageDocument.css index 524217516..de970512c 100644 --- a/toolkit/themes/shared/media/TopLevelImageDocument.css +++ b/toolkit/themes/shared/media/TopLevelImageDocument.css @@ -5,6 +5,12 @@ @media not print { /* N.B.: Remember to update ImageDocument.css in the tree or reftests may fail! */ +%ifdef MC_PALEMOON + body { + color: #eee; + background: #2E3B41; + } +%else body { color: #eee; background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); @@ -14,4 +20,5 @@ background: hsl(0,0%,90%) url("chrome://global/skin/media/imagedoc-lightnoise.png"); color: #222; } +%endif } diff --git a/toolkit/themes/shared/narrate.css b/toolkit/themes/shared/narrate.css index 8a44e78e2..836b5d686 100644 --- a/toolkit/themes/shared/narrate.css +++ b/toolkit/themes/shared/narrate.css @@ -1,3 +1,6 @@ +/* Avoid adding ID selector rules in this style sheet, since they could + * inadvertently match elements in the article content. */ + .narrating { position: relative; z-index: 1; @@ -22,7 +25,7 @@ body.dark .narrating { z-index: -1; border-bottom-style: solid; border-bottom-width: 7px; - transition: left 0.1s ease; + transition: left 0.1s ease, width 0.1s ease; } .narrating > .narrate-word-highlight { @@ -44,3 +47,193 @@ body.sepia .narrate-word-highlight { body.dark .narrate-word-highlight { border-bottom-color: #6f6f6f; } + +.narrate-dropdown { + --border-color: #e5e5e5; +} + +.narrate-toggle > svg { + display: block; + margin: 0 8px; +} + +.narrate-dropdown > .dropdown-popup button { + background-color: transparent; +} + +.narrate-dropdown > .dropdown-popup button:hover:not(:disabled) { + background-color: #eaeaea; +} + +.narrate-row { + display: flex; + align-items: center; + min-height: 40px; + box-sizing: border-box; +} + +.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: 100px; + border: none; + color: #666; + box-sizing: border-box; +} + +.narrate-control > button:not(:first-child) { + border-left: 1px solid var(--border-color); +} + +.narrate-skip-previous { + border-top-left-radius: 3px; + background-image: url("chrome://global/skin/narrate/back.svg#enabled"); + -moz-context-properties: fill; + fill: rgb(128 128 128); +} + +.narrate-skip-next { + border-top-right-radius: 3px; + background-image: url("chrome://global/skin/narrate/forward.svg#enabled"); + -moz-context-properties: fill; + fill: rgb(128 128 128); +} + +.narrate-skip-previous:disabled { + background-image: url("chrome://global/skin/narrate/back.svg#disabled"); +} + +.narrate-skip-next:disabled { + background-image: url("chrome://global/skin/narrate/forward.svg#disabled"); +} + +.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; +} + +.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; +} + +.narrate-rate-input::-moz-range-track { + background-color: #979797; + height: 2px; +} + +.narrate-rate-input::-moz-range-progress { + background-color: #2EA3FF; + height: 2px; +} + +.narrate-rate-input::-moz-range-thumb { + background-color: #808080; + height: 16px; + width: 16px; + border-radius: 8px; + border-width: 0; +} + +.narrate-rate-input:active::-moz-range-thumb { + background-color: #2EA3FF; +} + +/* Voice selection */ + +.voiceselect { + width: 100%; +} + +.voiceselect > button.select-toggle, +.voiceselect > .options > button.option { + -moz-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; +} + +.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: #7f7f7f; +} + +.voiceselect:not(.open) > button, +.voiceselect .option:last-child { + border-radius: 0 0 3px 3px; +} diff --git a/toolkit/themes/shared/narrateControls.css b/toolkit/themes/shared/narrateControls.css deleted file mode 100644 index 91d02d85a..000000000 --- a/toolkit/themes/shared/narrateControls.css +++ /dev/null @@ -1,185 +0,0 @@ -:scope { - --border-color: #e5e5e5; -} - -#narrate-toggle > svg { - display: block; - margin: 0 8px; -} - -.dropdown-popup button { - background-color: transparent; -} - -.dropdown-popup button:hover:not(:disabled) { - background-color: #eaeaea; -} - -.narrate-row { - display: flex; - align-items: center; - min-height: 40px; - box-sizing: border-box; -} - -.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: 100px; - border: none; - color: #666; - box-sizing: border-box; -} - -#narrate-control > button:not(:first-child) { - border-left: 1px solid var(--border-color); -} - -#narrate-skip-previous { - border-top-left-radius: 3px; - background-image: url("chrome://global/skin/narrate/back.svg#enabled"); -} - -#narrate-skip-next { - border-top-right-radius: 3px; - background-image: url("chrome://global/skin/narrate/forward.svg#enabled"); -} - -#narrate-skip-previous:disabled { - background-image: url("chrome://global/skin/narrate/back.svg#disabled"); -} - -#narrate-skip-next:disabled { - background-image: url("chrome://global/skin/narrate/forward.svg#disabled"); -} - -#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; -} - -#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; -} - -#narrate-rate-input::-moz-range-track { - background-color: #979797; - height: 2px; -} - -#narrate-rate-input::-moz-range-progress { - background-color: #2EA3FF; - height: 2px; -} - -#narrate-rate-input::-moz-range-thumb { - background-color: #808080; - height: 16px; - width: 16px; - border-radius: 8px; - border-width: 0; -} - -#narrate-rate-input:active::-moz-range-thumb { - background-color: #2EA3FF; -} - -/* Voice selection */ - -.voiceselect { - width: 100%; -} - -.voiceselect > button.select-toggle, -.voiceselect > .options > button.option { - -moz-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; -} - -.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: #7f7f7f; -} - -.voiceselect:not(.open) > button, -.option:last-child { - border-radius: 0 0 3px 3px; -} diff --git a/toolkit/themes/shared/non-mac.jar.inc.mn b/toolkit/themes/shared/non-mac.jar.inc.mn index 637537d9d..23f9da519 100644 --- a/toolkit/themes/shared/non-mac.jar.inc.mn +++ b/toolkit/themes/shared/non-mac.jar.inc.mn @@ -142,7 +142,7 @@ % override chrome://mozapps/skin/extensions/category-extensions.svg chrome://mozapps/skin/extensions/extensionGeneric.svg % override chrome://mozapps/skin/extensions/category-languages.png chrome://mozapps/skin/extensions/localeGeneric.png % override chrome://mozapps/skin/extensions/category-themes.png chrome://mozapps/skin/extensions/themeGeneric.png -% override chrome://mozapps/skin/plugins/notifyPluginCrashed.png chrome://mozapps/skin/plugins/pluginGeneric-16.png % override chrome://mozapps/skin/plugins/notifyPluginGeneric.png chrome://mozapps/skin/plugins/pluginGeneric-16.png % override chrome://mozapps/skin/xpinstall/xpinstallItemGeneric.png chrome://mozapps/skin/extensions/extensionGeneric.png #endif +% override chrome://mozapps/skin/plugins/notifyPluginCrashed.png chrome://mozapps/skin/plugins/pluginGeneric-16.png diff --git a/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg index 48bbb9e89..482a392fb 100644 --- a/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg +++ b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg @@ -1,13 +1,10 @@ <?xml version="1.0" encoding="utf-8"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- This Source Code Form is subject to the terms of the Mozilla Public - License, v. 2.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 version="1.1" - xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink" +<svg xmlns="http://www.w3.org/2000/svg" width="42" height="16" viewBox="0 0 42 16" diff --git a/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg b/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg index bcdcbe8ad..da02e608f 100644 --- a/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg +++ b/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg @@ -1,13 +1,10 @@ <?xml version="1.0" encoding="utf-8"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- This Source Code Form is subject to the terms of the Mozilla Public - License, v. 2.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 version="1.1" - xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink" +<svg xmlns="http://www.w3.org/2000/svg" width="44" height="16" viewBox="0 0 44 16" diff --git a/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg b/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg index 05d52828a..59517c246 100644 --- a/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg +++ b/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg @@ -1,13 +1,10 @@ <?xml version="1.0" encoding="utf-8"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- This Source Code Form is subject to the terms of the Mozilla Public - License, v. 2.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 version="1.1" - xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink" +<svg xmlns="http://www.w3.org/2000/svg" width="38" height="14" viewBox="0 0 38 14" diff --git a/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg b/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg index 0a5ee0dcc..ba50c5a52 100644 --- a/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg +++ b/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg @@ -1,13 +1,10 @@ <?xml version="1.0" encoding="utf-8"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- This Source Code Form is subject to the terms of the Mozilla Public - License, v. 2.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 version="1.1" - xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink" +<svg xmlns="http://www.w3.org/2000/svg" width="38" height="24" viewBox="0 0 38 24" diff --git a/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg index 837392ff3..9c663119f 100644 --- a/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg +++ b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg @@ -1,8 +1,8 @@ -<?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 24 24">
- <polygon opacity="0.15" points="16.583,0.015 16.569,0 4.583,12 16.569,24 16.583,23.985"/>
- <polygon fill="#fbfbfb" points="16.575,1.021 16.561,1.008 5.583,12 16.577,23.008 16.591,22.994 "/>
-</svg>
+<?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 16.58 0.01" fill="#b5b5b5"/> + <polyline points="16.63 1.51 6.08 12.01 16.63 22.5" fill="#fbfbfb"/> +</svg> diff --git a/toolkit/themes/shared/timepicker.css b/toolkit/themes/shared/timepicker.css deleted file mode 100644 index e8d081b30..000000000 --- a/toolkit/themes/shared/timepicker.css +++ /dev/null @@ -1,153 +0,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/. */ - -: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; - - --border: 0.1rem solid #D6D6D6; - --border-radius: 0.3rem; - - --font-color: #191919; - --fill-color: #EBEBEB; - - --selected-font-color: #FFFFFF; - --selected-fill-color: #0996F8; - - --button-font-color: #858585; - --button-font-color-hover: #4D4D4D; - --button-font-color-active: #191919; - - --disabled-opacity: 0.2; -} - -html { - font-size: 10px; -} - -body { - margin: 0; - color: var(--font-color); - font-size: var(--font-size-default); -} - -#time-picker { - display: flex; - flex-direction: row; - justify-content: space-around; -} - -.spinner-container { - font-family: sans-serif; - display: flex; - flex-direction: column; - width: var(--spinner-width); -} - -.spinner-container > button { - -moz-appearance: none; - border: none; - background: none; - background-color: var(--button-font-color); - height: var(--spinner-button-height); -} - -.spinner-container > button:hover { - background-color: var(--button-font-color-hover); -} - -.spinner-container > button.active { - background-color: var(--button-font-color-active); -} - -.spinner-container > button.up { - mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-previous") no-repeat 50% 50%; -} - -.spinner-container > button.down { - mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-next") 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: mandatory; - scroll-snap-points-y: repeat(100%); -} - -.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); - -moz-user-select: none; - scroll-snap-coordinate: 0 0; -} - -.spinner-container > .spinner > div:hover::before { - background: var(--fill-color); - border: var(--border); - border-radius: var(--border-radius); - content: ""; - position: absolute; - top: 0%; - bottom: 0%; - left: 0%; - right: 0%; - z-index: -10; -} - -.spinner-container > .spinner:not(.scrolling) > div.selection { - color: var(--selected-font-color); -} - -.spinner-container > .spinner > div.selection::before { - background: var(--selected-fill-color); - border: none; - border-radius: var(--border-radius); - content: ""; - position: absolute; - top: 0%; - bottom: 0%; - left: 0%; - right: 0%; - z-index: -10; -} - -.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); -}
\ No newline at end of file diff --git a/toolkit/themes/windows/global/global.css b/toolkit/themes/windows/global/global.css index aaddef882..6b6a21ca3 100644 --- a/toolkit/themes/windows/global/global.css +++ b/toolkit/themes/windows/global/global.css @@ -331,6 +331,7 @@ popupnotificationcontent { /* :::::: Close button icons ::::: */ +%ifdef MOZ_AUSTRALIS .close-icon { list-style-image: url("chrome://global/skin/icons/close.png"); -moz-image-region: rect(0, 20px, 20px, 0); @@ -398,3 +399,17 @@ popupnotificationcontent { } } } +%else +.close-icon { + list-style-image: url("chrome://global/skin/icons/close.svg"); + -moz-image-region: rect(0, 16px, 16px, 0); +} + +.close-icon:hover { + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +.close-icon:hover:active { + -moz-image-region: rect(0, 48px, 16px, 32px); +} +%endif diff --git a/toolkit/themes/windows/global/icons/close-inverted.svg b/toolkit/themes/windows/global/icons/close-inverted.svg new file mode 100644 index 000000000..ac2bd887d --- /dev/null +++ b/toolkit/themes/windows/global/icons/close-inverted.svg @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64" height="16" version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <linearGradient id="d" x1="5.5" x2="5.5" y1="1" y2="7" gradientTransform="translate(17,1)" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#e35d5d" offset="0"/>
+ <stop stop-color="#e35d5d" stop-opacity="0" offset="1"/>
+ </linearGradient>
+ </defs>
+ <g>
+ <rect x="17" y="1" width="14" height="14" rx="2.5" ry="2.5" fill="#b00021" fill-rule="evenodd"/>
+ <rect id="a" x="18" y="2" width="12" height="12" rx="1.5" ry="1.5" color="#000000" color-rendering="auto" fill="url(#d)" image-rendering="auto" shape-rendering="auto" solid-color="#000000" style="isolation:auto;mix-blend-mode:normal"/>
+ <path id="c" d="m26.8 5.2-5.6 5.6m0-5.6 5.6 5.6" fill="none" stroke="#fff" stroke-linecap="square" stroke-width="1.4"/>
+ <path id="b" d="m10.8 5.2-5.6 5.6m0-5.6 5.6 5.6" fill="none" stroke="#d0d0d0" stroke-linecap="square" stroke-width="1.4"/>
+ <rect x="33" y="1" width="14" height="14" rx="2" ry="2" fill="#800018" fill-rule="evenodd"/>
+ <use transform="translate(48)" width="100%" height="100%" opacity=".5" xlink:href="#b"/>
+ <use transform="translate(16)" width="100%" height="100%" opacity=".6" xlink:href="#a"/>
+ <use transform="translate(16)" width="100%" height="100%" opacity=".6" xlink:href="#c"/>
+ </g>
+</svg>
diff --git a/toolkit/themes/windows/global/icons/close.svg b/toolkit/themes/windows/global/icons/close.svg new file mode 100644 index 000000000..4093c880d --- /dev/null +++ b/toolkit/themes/windows/global/icons/close.svg @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64" height="16" version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <linearGradient id="d" x1="5.5" x2="5.5" y1="1" y2="7" gradientTransform="translate(17,1)" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#e35d5d" offset="0"/>
+ <stop stop-color="#e35d5d" stop-opacity="0" offset="1"/>
+ </linearGradient>
+ </defs>
+ <g>
+ <rect x="17" y="1" width="14" height="14" rx="2.5" ry="2.5" fill="#b00021" fill-rule="evenodd"/>
+ <rect id="a" x="18" y="2" width="12" height="12" rx="1.5" ry="1.5" color="#000000" color-rendering="auto" fill="url(#d)" image-rendering="auto" shape-rendering="auto" solid-color="#000000" style="isolation:auto;mix-blend-mode:normal"/>
+ <path id="c" d="m26.8 5.2-5.6 5.6m0-5.6 5.6 5.6" fill="none" stroke="#fff" stroke-linecap="square" stroke-width="1.4"/>
+ <path id="b" d="m10.8 5.2-5.6 5.6m0-5.6 5.6 5.6" fill="none" stroke="#303030" stroke-linecap="square" stroke-width="1.4"/>
+ <rect x="33" y="1" width="14" height="14" rx="2" ry="2" fill="#800018" fill-rule="evenodd"/>
+ <use transform="translate(48)" width="100%" height="100%" opacity=".5" xlink:href="#b"/>
+ <use transform="translate(16)" width="100%" height="100%" opacity=".6" xlink:href="#a"/>
+ <use transform="translate(16)" width="100%" height="100%" opacity=".6" xlink:href="#c"/>
+ </g>
+</svg>
diff --git a/toolkit/themes/windows/global/icons/loading_16.png b/toolkit/themes/windows/global/icons/loading_16.png Binary files differnew file mode 100644 index 000000000..0315d470b --- /dev/null +++ b/toolkit/themes/windows/global/icons/loading_16.png diff --git a/toolkit/themes/windows/global/icons/notloading_16.png b/toolkit/themes/windows/global/icons/notloading_16.png Binary files differnew file mode 100644 index 000000000..f8366ded5 --- /dev/null +++ b/toolkit/themes/windows/global/icons/notloading_16.png diff --git a/toolkit/themes/windows/global/inContentUI.css b/toolkit/themes/windows/global/inContentUI.css new file mode 100644 index 000000000..a3bca7b06 --- /dev/null +++ b/toolkit/themes/windows/global/inContentUI.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/. */ + +/* + * The default namespace for this file is XUL. Be sure to prefix rules that + * are applicable to both XUL and HTML with '*|'. + */ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Page background */ +*|*:root { + -moz-appearance: none; + padding: 18px; + background-repeat: repeat; + color: -moz-dialogText; + background-color: -moz-dialog; + background-image: /* Texture */ + url("chrome://global/skin/inContentUI/background-texture.png"); +} + +html|html { + font: message-box; +} + +@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista), + (-moz-windows-default-theme) and (-moz-os-version: windows-win7) { + *|*:root { + color: #000; + background-color: #CCD9EA; + } +} + +@media (-moz-windows-glass) { + *|*:root { + /* Blame shorlander for this monstrosity. */ + background-image: /* Side gradients */ + linear-gradient(to right, + rgba(255,255,255,0.2), transparent 40%, + transparent 60%, rgba(255,255,255,0.2)), + /* Aero-style light beams */ + -moz-linear-gradient(left 32deg, + /* First light beam */ + transparent 19.5%, rgba(255,255,255,0.1) 20%, + rgba(255,255,255,0.1) 21.5%, rgba(255,255,255,0.2) 22%, + rgba(255,255,255,0.2) 25.5%, rgba(255,255,255,0.1) 26%, + rgba(255,255,255,0.1) 27.5%, transparent 28%, + /* Second light beam */ + transparent 49.5%, rgba(255,255,255,0.1) 50%, + rgba(255,255,255,0.1) 52.5%, rgba(255,255,255,0.2) 53%, + rgba(255,255,255,0.2) 54.5%, rgba(255,255,255,0.1) 55%, + rgba(255,255,255,0.1) 57.5%, transparent 58%, + /* Third light beam */ + transparent 87%, rgba(255,255,255,0.2) 90%), + /* Texture */ + url("chrome://global/skin/inContentUI/background-texture.png"); + } +} + +/* Use the new in-content colors for #contentAreaDownloadsView. After landing + of bug 989469 the colors can be moved to *|*:root */ +*|*#contentAreaDownloadsView { + background: #f1f1f1; + color: #424e5a; +} + +/* Content */ +*|*.main-content { + /* Needed to allow the radius to clip the inner content, see bug 595656 */ + overflow: hidden; + background-color: rgba(255, 255, 255, 0.35); + background-image: linear-gradient(rgba(255, 255, 255, 0), + rgba(255, 255, 255, 0.75)); + border: 1px solid #C3CEDF; +} + +%ifdef XP_WIN +@media (-moz-os-version: windows-vista), + (-moz-os-version: windows-win7) { +%endif + *|*.main-content { + border-radius: 5px; + } +%ifdef XP_WIN +} +%endif + +@media (-moz-windows-glass) { + /* Buttons */ + *|button, + menulist, + colorpicker[type="button"] { + -moz-appearance: none; + color: black; + padding: 0 5px; + background: linear-gradient(rgba(251, 252, 253, 0.95), transparent 49%, + rgba(211, 212, 213, 0.45) 51%, rgba(225, 226, 229, 0.3)); + background-clip: padding-box; + border-radius: 3px; + border: 1px solid rgba(31, 64, 100, 0.4); + border-top-color: rgba(31, 64, 100, 0.3); + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, + 0 0 2px 1px rgba(255, 255, 255, 0.25) inset; + } + + menulist { + -moz-padding-end: 0; + } + + colorpicker[type="button"]:-moz-focusring:not([open="true"]) > .colorpicker-button-colorbox { + outline: 1px dotted ThreeDDarkShadow; + } + + html|button[disabled], + button[disabled="true"], + menulist[disabled="true"], + colorpicker[type="button"][disabled="true"] { + -moz-border-top-colors: rgba(31, 64, 100, 0.3) !important; + -moz-border-right-colors: rgba(31, 64, 100, 0.4) !important; + -moz-border-bottom-colors: rgba(31, 64, 100, 0.4) !important; + -moz-border-left-colors: rgba(31, 64, 100, 0.4) !important; + opacity: 0.8; + color: #505050; + } + + html|button:not([disabled]):active:hover, + button:not([disabled="true"]):active:hover, + menulist[open="true"]:not([disabled="true"]), + colorpicker[type="button"][open="true"]:not([disabled="true"]) { + background-color: rgba(61, 76, 92, 0.2); + border-color: rgba(39, 53, 68, 0.5); + box-shadow: 0 0 3px 1px rgba(39, 53, 68, 0.2) inset; + } + + button > .button-box { + padding: 1px !important; + } + + spinbuttons > .spinbuttons-box > .spinbuttons-button { + border-radius: 0; + padding: 0 4px; + } + + spinbuttons > .spinbuttons-box > .spinbuttons-up { + list-style-image: url("chrome://global/skin/arrow/arrow-up.gif"); + border-bottom-width: 0; + } + + spinbuttons > .spinbuttons-box > .spinbuttons-down { + list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif"); + } +} + +colorpicker[type="button"] { + margin: 1px 5px 2px 5px; + padding: 3px; + height: 25px; +} diff --git a/toolkit/themes/windows/global/jar.mn b/toolkit/themes/windows/global/jar.mn index a6ccbd71d..a2cc9e2ea 100644 --- a/toolkit/themes/windows/global/jar.mn +++ b/toolkit/themes/windows/global/jar.mn @@ -27,6 +27,7 @@ toolkit.jar: skin/classic/global/console/itemSelected.png (console/itemSelected.png) skin/classic/global/findBar.css * skin/classic/global/global.css +* skin/classic/global/inContentUI.css skin/classic/global/listbox.css skin/classic/global/netError.css skin/classic/global/numberbox.css @@ -44,11 +45,15 @@ toolkit.jar: skin/classic/global/icons/autocomplete-search.svg (icons/autocomplete-search.svg) skin/classic/global/icons/blacklist_favicon.png (icons/blacklist_favicon.png) skin/classic/global/icons/blacklist_large.png (icons/blacklist_large.png) + skin/classic/global/icons/close.svg (icons/close.svg) + skin/classic/global/icons/close-inverted.svg (icons/close-inverted.svg) skin/classic/global/icons/close-win7.png (icons/close-win7.png) skin/classic/global/icons/close-win7@2x.png (icons/close-win7@2x.png) skin/classic/global/icons/close-inverted-win7.png (icons/close-inverted-win7.png) skin/classic/global/icons/close-inverted-win7@2x.png (icons/close-inverted-win7@2x.png) skin/classic/global/icons/find.png (icons/find.png) + skin/classic/global/icons/loading_16.png (icons/loading_16.png) + skin/classic/global/icons/notloading_16.png (icons/notloading_16.png) skin/classic/global/icons/resizer.png (icons/resizer.png) skin/classic/global/icons/sslWarning.png (icons/sslWarning.png) * skin/classic/global/in-content/common.css (in-content/common.css) |
