From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001 From: "Matt A. Tobin" Date: Fri, 2 Feb 2018 04:16:08 -0500 Subject: Add m-esr52 at 52.6.0 --- toolkit/themes/shared/about.css | 62 ++ toolkit/themes/shared/aboutCache.css | 70 ++ toolkit/themes/shared/aboutCacheEntry.css | 29 + toolkit/themes/shared/aboutMemory.css | 5 + toolkit/themes/shared/aboutNetworking.css | 123 +++ toolkit/themes/shared/aboutProfiles.css | 68 ++ toolkit/themes/shared/aboutReader.css | 178 ++++ toolkit/themes/shared/aboutReaderContent.css | 177 ++++ toolkit/themes/shared/aboutReaderControls.css | 388 +++++++ toolkit/themes/shared/aboutServiceWorkers.css | 44 + toolkit/themes/shared/aboutSupport.css | 131 +++ toolkit/themes/shared/alert-common.css | 165 +++ toolkit/themes/shared/appPicker.css | 23 + toolkit/themes/shared/config.css | 49 + .../themes/shared/extensions/alerticon-error.svg | 6 + .../shared/extensions/alerticon-info-negative.svg | 6 + .../shared/extensions/alerticon-info-positive.svg | 6 + .../themes/shared/extensions/alerticon-warning.svg | 6 + .../themes/shared/extensions/extensionGeneric.svg | 12 + .../themes/shared/extensions/extensions.inc.css | 1082 ++++++++++++++++++++ toolkit/themes/shared/extensions/navigation.png | Bin 0 -> 663 bytes toolkit/themes/shared/extensions/newaddon.inc.css | 114 +++ toolkit/themes/shared/extensions/utilities.svg | 30 + .../shared/formautofill/requestAutocomplete.css | 11 + toolkit/themes/shared/icons/find-arrows.svg | 16 + toolkit/themes/shared/icons/input-clear.svg | 16 + toolkit/themes/shared/icons/loading.png | Bin 0 -> 12585 bytes toolkit/themes/shared/icons/loading@2x.png | Bin 0 -> 40165 bytes toolkit/themes/shared/in-content/check-partial.svg | 28 + toolkit/themes/shared/in-content/check.svg | 28 + toolkit/themes/shared/in-content/common.inc.css | 830 +++++++++++++++ toolkit/themes/shared/in-content/dropdown.svg | 22 + toolkit/themes/shared/in-content/help-glyph.svg | 28 + .../themes/shared/in-content/info-pages.inc.css | 109 ++ toolkit/themes/shared/in-content/radio.svg | 22 + toolkit/themes/shared/incontent-icons/blocked.svg | 13 + toolkit/themes/shared/incontent-icons/info.svg | 8 + toolkit/themes/shared/incontent-icons/warning.svg | 13 + toolkit/themes/shared/jar.inc.mn | 99 ++ .../themes/shared/media/TopLevelImageDocument.css | 17 + .../themes/shared/media/TopLevelVideoDocument.css | 12 + .../themes/shared/media/clicktoplay-bgtexture.png | Bin 0 -> 5940 bytes toolkit/themes/shared/media/closeCaptionButton.png | Bin 0 -> 583 bytes .../themes/shared/media/closeCaptionButton@2x.png | Bin 0 -> 1335 bytes toolkit/themes/shared/media/error.png | Bin 0 -> 433 bytes toolkit/themes/shared/media/fullscreenButton.png | Bin 0 -> 733 bytes .../themes/shared/media/fullscreenButton@2x.png | Bin 0 -> 1759 bytes toolkit/themes/shared/media/imagedoc-darknoise.png | Bin 0 -> 3050 bytes .../themes/shared/media/imagedoc-lightnoise.png | Bin 0 -> 4025 bytes toolkit/themes/shared/media/muteButton.png | Bin 0 -> 619 bytes toolkit/themes/shared/media/muteButton@2x.png | Bin 0 -> 1185 bytes toolkit/themes/shared/media/noAudio.png | Bin 0 -> 930 bytes toolkit/themes/shared/media/noAudio@2x.png | Bin 0 -> 1756 bytes toolkit/themes/shared/media/pauseButton.png | Bin 0 -> 269 bytes toolkit/themes/shared/media/pauseButton@2x.png | Bin 0 -> 434 bytes toolkit/themes/shared/media/playButton.png | Bin 0 -> 448 bytes toolkit/themes/shared/media/playButton@2x.png | Bin 0 -> 831 bytes toolkit/themes/shared/media/scrubberThumb.png | Bin 0 -> 562 bytes toolkit/themes/shared/media/scrubberThumb@2x.png | Bin 0 -> 1354 bytes toolkit/themes/shared/media/scrubberThumbWide.png | Bin 0 -> 563 bytes .../themes/shared/media/scrubberThumbWide@2x.png | Bin 0 -> 1396 bytes toolkit/themes/shared/media/stalled.png | Bin 0 -> 20763 bytes toolkit/themes/shared/media/throbber.png | Bin 0 -> 30718 bytes toolkit/themes/shared/media/unmuteButton.png | Bin 0 -> 324 bytes toolkit/themes/shared/media/unmuteButton@2x.png | Bin 0 -> 542 bytes .../themes/shared/media/videoClickToPlayButton.svg | 30 + toolkit/themes/shared/media/videocontrols.css | 440 ++++++++ toolkit/themes/shared/media/volume-empty.png | Bin 0 -> 295 bytes toolkit/themes/shared/media/volume-empty@2x.png | Bin 0 -> 268 bytes toolkit/themes/shared/media/volume-full.png | Bin 0 -> 297 bytes toolkit/themes/shared/media/volume-full@2x.png | Bin 0 -> 267 bytes toolkit/themes/shared/menu-check-active.svg | 7 + toolkit/themes/shared/menu-check-black.svg | 7 + toolkit/themes/shared/menu-check-hover.svg | 7 + toolkit/themes/shared/menu-check.png | Bin 0 -> 197 bytes toolkit/themes/shared/menu-check@2x.png | Bin 0 -> 377 bytes toolkit/themes/shared/mozapps.inc.mn | 28 + toolkit/themes/shared/narrate.css | 46 + toolkit/themes/shared/narrate/arrow.svg | 3 + toolkit/themes/shared/narrate/back.svg | 15 + toolkit/themes/shared/narrate/fast.svg | 3 + toolkit/themes/shared/narrate/forward.svg | 15 + toolkit/themes/shared/narrate/slow.svg | 6 + toolkit/themes/shared/narrate/start.svg | 3 + toolkit/themes/shared/narrate/stop.svg | 3 + toolkit/themes/shared/narrateControls.css | 185 ++++ toolkit/themes/shared/non-mac.jar.inc.mn | 141 +++ toolkit/themes/shared/passwordmgr.css | 26 + .../shared/places/defaultFavicon-inverted.png | Bin 0 -> 452 bytes .../shared/places/defaultFavicon-inverted@2x.png | Bin 0 -> 1005 bytes toolkit/themes/shared/places/defaultFavicon.png | Bin 0 -> 485 bytes toolkit/themes/shared/places/defaultFavicon@2x.png | Bin 0 -> 1146 bytes .../shared/plugins/contentPluginActivate.png | Bin 0 -> 3043 bytes .../themes/shared/plugins/contentPluginBlocked.png | Bin 0 -> 1514 bytes .../themes/shared/plugins/contentPluginClose.png | Bin 0 -> 1370 bytes .../themes/shared/plugins/contentPluginCrashed.png | Bin 0 -> 1470 bytes .../shared/plugins/contentPluginDisabled.png | Bin 0 -> 1620 bytes .../themes/shared/plugins/contentPluginStripe.png | Bin 0 -> 460 bytes toolkit/themes/shared/plugins/pluginProblem.css | 206 ++++ toolkit/themes/shared/reader/RM-Close-24x24.svg | 23 + .../shared/reader/RM-Content-Width-Minus-42x16.svg | 19 + .../shared/reader/RM-Content-Width-Plus-44x16.svg | 19 + .../shared/reader/RM-Line-Height-Minus-38x14.svg | 20 + .../shared/reader/RM-Line-Height-Plus-38x24.svg | 20 + toolkit/themes/shared/reader/RM-Minus-24x24.svg | 7 + toolkit/themes/shared/reader/RM-Plus-24x24.svg | 7 + .../shared/reader/RM-Type-Controls-24x24.svg | 7 + .../shared/reader/RM-Type-Controls-Arrow.svg | 8 + toolkit/themes/shared/timepicker.css | 153 +++ 109 files changed, 5500 insertions(+) create mode 100644 toolkit/themes/shared/about.css create mode 100644 toolkit/themes/shared/aboutCache.css create mode 100644 toolkit/themes/shared/aboutCacheEntry.css create mode 100644 toolkit/themes/shared/aboutMemory.css create mode 100644 toolkit/themes/shared/aboutNetworking.css create mode 100644 toolkit/themes/shared/aboutProfiles.css create mode 100644 toolkit/themes/shared/aboutReader.css create mode 100644 toolkit/themes/shared/aboutReaderContent.css create mode 100644 toolkit/themes/shared/aboutReaderControls.css create mode 100644 toolkit/themes/shared/aboutServiceWorkers.css create mode 100644 toolkit/themes/shared/aboutSupport.css create mode 100644 toolkit/themes/shared/alert-common.css create mode 100644 toolkit/themes/shared/appPicker.css create mode 100644 toolkit/themes/shared/config.css create mode 100644 toolkit/themes/shared/extensions/alerticon-error.svg create mode 100644 toolkit/themes/shared/extensions/alerticon-info-negative.svg create mode 100644 toolkit/themes/shared/extensions/alerticon-info-positive.svg create mode 100644 toolkit/themes/shared/extensions/alerticon-warning.svg create mode 100644 toolkit/themes/shared/extensions/extensionGeneric.svg create mode 100644 toolkit/themes/shared/extensions/extensions.inc.css create mode 100644 toolkit/themes/shared/extensions/navigation.png create mode 100644 toolkit/themes/shared/extensions/newaddon.inc.css create mode 100644 toolkit/themes/shared/extensions/utilities.svg create mode 100644 toolkit/themes/shared/formautofill/requestAutocomplete.css create mode 100644 toolkit/themes/shared/icons/find-arrows.svg create mode 100644 toolkit/themes/shared/icons/input-clear.svg create mode 100644 toolkit/themes/shared/icons/loading.png create mode 100644 toolkit/themes/shared/icons/loading@2x.png create mode 100644 toolkit/themes/shared/in-content/check-partial.svg create mode 100644 toolkit/themes/shared/in-content/check.svg create mode 100644 toolkit/themes/shared/in-content/common.inc.css create mode 100644 toolkit/themes/shared/in-content/dropdown.svg create mode 100644 toolkit/themes/shared/in-content/help-glyph.svg create mode 100644 toolkit/themes/shared/in-content/info-pages.inc.css create mode 100644 toolkit/themes/shared/in-content/radio.svg create mode 100644 toolkit/themes/shared/incontent-icons/blocked.svg create mode 100644 toolkit/themes/shared/incontent-icons/info.svg create mode 100644 toolkit/themes/shared/incontent-icons/warning.svg create mode 100644 toolkit/themes/shared/jar.inc.mn create mode 100644 toolkit/themes/shared/media/TopLevelImageDocument.css create mode 100644 toolkit/themes/shared/media/TopLevelVideoDocument.css create mode 100644 toolkit/themes/shared/media/clicktoplay-bgtexture.png create mode 100644 toolkit/themes/shared/media/closeCaptionButton.png create mode 100644 toolkit/themes/shared/media/closeCaptionButton@2x.png create mode 100644 toolkit/themes/shared/media/error.png create mode 100644 toolkit/themes/shared/media/fullscreenButton.png create mode 100644 toolkit/themes/shared/media/fullscreenButton@2x.png create mode 100644 toolkit/themes/shared/media/imagedoc-darknoise.png create mode 100644 toolkit/themes/shared/media/imagedoc-lightnoise.png create mode 100644 toolkit/themes/shared/media/muteButton.png create mode 100644 toolkit/themes/shared/media/muteButton@2x.png create mode 100644 toolkit/themes/shared/media/noAudio.png create mode 100644 toolkit/themes/shared/media/noAudio@2x.png create mode 100644 toolkit/themes/shared/media/pauseButton.png create mode 100644 toolkit/themes/shared/media/pauseButton@2x.png create mode 100644 toolkit/themes/shared/media/playButton.png create mode 100644 toolkit/themes/shared/media/playButton@2x.png create mode 100644 toolkit/themes/shared/media/scrubberThumb.png create mode 100644 toolkit/themes/shared/media/scrubberThumb@2x.png create mode 100644 toolkit/themes/shared/media/scrubberThumbWide.png create mode 100644 toolkit/themes/shared/media/scrubberThumbWide@2x.png create mode 100644 toolkit/themes/shared/media/stalled.png create mode 100644 toolkit/themes/shared/media/throbber.png create mode 100644 toolkit/themes/shared/media/unmuteButton.png create mode 100644 toolkit/themes/shared/media/unmuteButton@2x.png create mode 100644 toolkit/themes/shared/media/videoClickToPlayButton.svg create mode 100644 toolkit/themes/shared/media/videocontrols.css create mode 100644 toolkit/themes/shared/media/volume-empty.png create mode 100644 toolkit/themes/shared/media/volume-empty@2x.png create mode 100644 toolkit/themes/shared/media/volume-full.png create mode 100644 toolkit/themes/shared/media/volume-full@2x.png create mode 100644 toolkit/themes/shared/menu-check-active.svg create mode 100644 toolkit/themes/shared/menu-check-black.svg create mode 100644 toolkit/themes/shared/menu-check-hover.svg create mode 100644 toolkit/themes/shared/menu-check.png create mode 100644 toolkit/themes/shared/menu-check@2x.png create mode 100644 toolkit/themes/shared/mozapps.inc.mn create mode 100644 toolkit/themes/shared/narrate.css create mode 100644 toolkit/themes/shared/narrate/arrow.svg create mode 100644 toolkit/themes/shared/narrate/back.svg create mode 100644 toolkit/themes/shared/narrate/fast.svg create mode 100644 toolkit/themes/shared/narrate/forward.svg create mode 100644 toolkit/themes/shared/narrate/slow.svg create mode 100644 toolkit/themes/shared/narrate/start.svg create mode 100644 toolkit/themes/shared/narrate/stop.svg create mode 100644 toolkit/themes/shared/narrateControls.css create mode 100644 toolkit/themes/shared/non-mac.jar.inc.mn create mode 100644 toolkit/themes/shared/passwordmgr.css create mode 100644 toolkit/themes/shared/places/defaultFavicon-inverted.png create mode 100644 toolkit/themes/shared/places/defaultFavicon-inverted@2x.png create mode 100644 toolkit/themes/shared/places/defaultFavicon.png create mode 100644 toolkit/themes/shared/places/defaultFavicon@2x.png create mode 100644 toolkit/themes/shared/plugins/contentPluginActivate.png create mode 100644 toolkit/themes/shared/plugins/contentPluginBlocked.png create mode 100644 toolkit/themes/shared/plugins/contentPluginClose.png create mode 100644 toolkit/themes/shared/plugins/contentPluginCrashed.png create mode 100644 toolkit/themes/shared/plugins/contentPluginDisabled.png create mode 100644 toolkit/themes/shared/plugins/contentPluginStripe.png create mode 100644 toolkit/themes/shared/plugins/pluginProblem.css create mode 100644 toolkit/themes/shared/reader/RM-Close-24x24.svg create mode 100644 toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg create mode 100644 toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg create mode 100644 toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg create mode 100644 toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg create mode 100644 toolkit/themes/shared/reader/RM-Minus-24x24.svg create mode 100644 toolkit/themes/shared/reader/RM-Plus-24x24.svg create mode 100644 toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg create mode 100644 toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg create mode 100644 toolkit/themes/shared/timepicker.css (limited to 'toolkit/themes/shared') diff --git a/toolkit/themes/shared/about.css b/toolkit/themes/shared/about.css new file mode 100644 index 000000000..25f52992a --- /dev/null +++ b/toolkit/themes/shared/about.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/. */ + +html { + background: -moz-Dialog; + padding: 0 1em; + font: message-box; +} + +body { + color: -moz-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: -moz-Field; +} + +.aboutPageWideContainer { + max-width: 80%; +} + +#aboutLogoContainer { + border: 1px solid ThreeDLightShadow; + width: 300px; + margin-bottom: 2em; +} + +img { + border: 0; +} + +#version { + font-weight: bold; + color: #909090; + margin: -24px 0 9px 17px; +} + +ul { + margin: 0; + margin-inline-start: 1.5em; + padding: 0; + list-style: square; +} + +ul > li { + margin-top: .5em; +} + +th, td { + padding: 0 5px; +} + +.columns { + -moz-column-width: 20em; + -moz-column-gap: 3em; +} diff --git a/toolkit/themes/shared/aboutCache.css b/toolkit/themes/shared/aboutCache.css new file mode 100644 index 000000000..7fb631808 --- /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 000000000..8c8eb9a97 --- /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/aboutMemory.css b/toolkit/themes/shared/aboutMemory.css new file mode 100644 index 000000000..88fa27d50 --- /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 000000000..981c04a39 --- /dev/null +++ b/toolkit/themes/shared/aboutNetworking.css @@ -0,0 +1,123 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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: left; +} + +#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; +} + +#categories hr { + border-top-color: rgba(255,255,255,0.15); +} + +/** Warning container **/ + +/* XXX: a lot of this is duplicated from info-pages.css since that stylesheet + is incompatible with this type of layout */ +.warningBackground:not([hidden]) { + display: flex; +} + +.warningBackground { + flex-direction: column; + box-sizing: border-box; + min-height: 100vh; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + z-index: 10; + top: 0; + left: 0; + position: fixed; + background: var(--in-content-page-background); +} + +.title { + position: relative; + border-bottom: 1px solid var(--in-content-box-border-color); + margin-bottom: 1em; + padding-bottom: 0.5em; +} + +.title::before { + content: ""; + left: -2.3em; + top: 0; + position: absolute; + display: block; + width: 1.6em; + height: 1.6em; + background: url("chrome://global/skin/icons/warning.svg") no-repeat left center; + background-size: 1.6em; +} + +.warningBackground button { + margin-top: 1em; + margin-left: 0; + min-width: 100px; +} + +/** 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 000000000..09dc9ea81 --- /dev/null +++ b/toolkit/themes/shared/aboutProfiles.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/. */ + +html { + --aboutProfiles-table-background: #ebebeb; + background-color: var(--in-content-page-background); +} + +body { + margin: 40px 48px; +} + +.page-subtitle { + margin-bottom: 3em; +} + +button { + margin-inline-start: 0; + margin-inline-end: 8px; +} + +table { + background-color: var(--aboutProfiles-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: 0px; +} + +th, td { + border: 1px solid var(--in-content-border-color); + padding: 4px; + text-align: start; +} + +th { + background-color: var(--in-content-table-header-background); + color: var(--in-content-selected-text); +} + +th.column { + white-space: nowrap; + width: 0px; +} + +td { + border-color: var(--in-content-table-border-dark-color); +} + +#action-box { + background-color: var(--aboutProfiles-table-background); + border: 1px solid var(--in-content-border-color); + color: var(--in-content-text-color); + float: right; + margin-top: 2em; + margin-bottom: 20px; + margin-inline-start: 20px; + margin-inline-end: 0; + padding: 16px; + width: 30%; +} + +#action-box:dir(rtl) { + float: left; +} diff --git a/toolkit/themes/shared/aboutReader.css b/toolkit/themes/shared/aboutReader.css new file mode 100644 index 000000000..49436de84 --- /dev/null +++ b/toolkit/themes/shared/aboutReader.css @@ -0,0 +1,178 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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 { + 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; +} + +body.light { + color: #333333; + background-color: #ffffff; +} + +body.dark { + color: #eeeeee; + background-color: #333333; +} + +body.dark *::-moz-selection { + background-color: #FFFFFF; + color: #0095DD; +} +body.dark a::-moz-selection { + color: #DD4800; +} + +body.sepia { + color: #5b4636; + background-color: #f4ecd8; +} + +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 { + max-width: 30em; + margin: 0 auto; +} + +#container.font-size1 { + font-size: 12px; +} + +#container.font-size2 { + font-size: 14px; +} + +#container.font-size3 { + font-size: 16px; +} + +#container.font-size4 { + font-size: 18px; +} + +#container.font-size5 { + font-size: 20px; +} + +#container.font-size6 { + font-size: 22px; +} + +#container.font-size7 { + font-size: 24px; +} + +#container.font-size8 { + font-size: 26px; +} + +#container.font-size9 { + font-size: 28px; +} + +#container.content-width1 { + max-width: 20em; +} + +#container.content-width2 { + max-width: 25em; +} + +#container.content-width3 { + max-width: 30em; +} + +#container.content-width4 { + max-width: 35em; +} + +#container.content-width5 { + max-width: 40em; +} + +#container.content-width6 { + max-width: 45em; +} + +#container.content-width7 { + max-width: 50em; +} + +#container.content-width8 { + max-width: 55em; +} + +#container.content-width9 { + max-width: 60em; +} + +/* 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; +} + +/* Add toolbar transition base on loaded class */ + +body.loaded .toolbar { + transition: transform 0.3s ease-out; +} + +body:not(.loaded) .toolbar:-moz-locale-dir(ltr) { + transform: translateX(-100%); +} + +body:not(.loaded) .toolbar:-moz-locale-dir(rtl) { + transform: translateX(100%); +} diff --git a/toolkit/themes/shared/aboutReaderContent.css b/toolkit/themes/shared/aboutReaderContent.css new file mode 100644 index 000000000..633391d37 --- /dev/null +++ b/toolkit/themes/shared/aboutReaderContent.css @@ -0,0 +1,177 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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 new file mode 100644 index 000000000..afd65f458 --- /dev/null +++ b/toolkit/themes/shared/aboutReaderControls.css @@ -0,0 +1,388 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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/aboutServiceWorkers.css b/toolkit/themes/shared/aboutServiceWorkers.css new file mode 100644 index 000000000..1f1f29757 --- /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; + left:0; + position:fixed; +} + +.warningMessage { + color: -moz-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: -moz-Field; + margin-left: 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 000000000..d26cd3cbd --- /dev/null +++ b/toolkit/themes/shared/aboutSupport.css @@ -0,0 +1,131 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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 { + --aboutSupport-table-background: #ebebeb; + background-color: var(--in-content-page-background); +} + +body { + margin: 40px 48px; +} + +.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; +} + +table { + background-color: var(--aboutSupport-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: 0px; +} + +th, td { + border: 1px solid var(--in-content-border-color); + padding: 4px; +} + +thead th { + text-align: center; +} + +th { + text-align: start; + background-color: var(--in-content-table-header-background); + color: var(--in-content-selected-text); +} + +th.title-column { + white-space: nowrap; + width: 0px; + font-size: medium; +} + +th.column { + white-space: nowrap; + width: 0px; +} + +td { + text-align: start; + border-color: var(--in-content-table-border-dark-color); +} + +.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; +} + +#action-box { + background-color: var(--aboutSupport-table-background); + border: 1px solid var(--in-content-border-color); + color: var(--in-content-text-color); + float: right; + margin-top: 2em; + margin-bottom: 20px; + margin-inline-start: 20px; + margin-inline-end: 0; + padding: 16px; + width: 30%; +} + +#action-box, +#reset-box, +#safe-mode-box { + display: none; +} + +#action-box:dir(rtl) { + float: left; +} + +#reset-box > h3 { + margin-top: 0; +} + +#action-box button { + display: block; +} + +#verify-place-result { + max-height: 200px; + overflow: auto; +} + +.block { + display: block; +} + +.hidden { + display: none; +} diff --git a/toolkit/themes/shared/alert-common.css b/toolkit/themes/shared/alert-common.css new file mode 100644 index 000000000..010e89393 --- /dev/null +++ b/toolkit/themes/shared/alert-common.css @@ -0,0 +1,165 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* ===== alert.css ===================================================== + == Shared styles specific to the alerts dialog. + ======================================================================= */ + +@import url("chrome://global/skin/"); + +@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]):not([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 { + to { + opacity: 0; + } +} + +@keyframes alert-closing-animation { + 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 { + -moz-appearance: none; + background-color: transparent; + border-width: 0; + border-radius: 20px; + min-width: 0; + list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-grayscale"); + margin-inline-end: 0; + margin-bottom: 0; +} + +#alertSettings > .button-box { + padding: 0; +} + +#alertSettings:hover, +#alertSettings[open] { + list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-inverted"); +} + +#alertSettings:hover { + background-color: rgb(128,128,128); +} + +#alertSettings[open], +#alertSettings:hover:active { + background-color: rgb(102,102,102); +} + +#alertSettings[focusedViaMouse]:-moz-focusring > .button-box { + border-color: transparent; +} + +#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 000000000..3bdb31b6c --- /dev/null +++ b/toolkit/themes/shared/appPicker.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/. */ + + +#app-picker { + width: 320px; +} + +#content-description { + font-weight: bold; +} + +#content-icon, +.listcell-icon { + margin: 5px; + width: 32px; + height: 32px; +} + +.listcell-label { + padding: 5px; +} diff --git a/toolkit/themes/shared/config.css b/toolkit/themes/shared/config.css new file mode 100644 index 000000000..8e8d23ace --- /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"); +} + +#warningTitle { + font-weight: lighter; + line-height: 1.2; + color: #333; + 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/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 @@ + + + + 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 @@ + + + + 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 @@ + + + + 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 @@ + + + + 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 @@ + + + + + + + + + + diff --git a/toolkit/themes/shared/extensions/extensions.inc.css b/toolkit/themes/shared/extensions/extensions.inc.css new file mode 100644 index 000000000..c4523bbe6 --- /dev/null +++ b/toolkit/themes/shared/extensions/extensions.inc.css @@ -0,0 +1,1082 @@ +%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 +@import url("chrome://global/skin/in-content/common.css"); + +.main-content { + padding: 0; +} + +#nav-header { + min-height: 39px; + background-color: #424f5a; +} + +.view-pane > .list > scrollbox { + padding-right: 48px; + padding-left: 48px; +} + + +/*** global warnings ***/ + +.global-warning-container { + overflow-x: hidden; +} + +.global-warning { + -moz-box-align: center; + padding: 0 8px; + color: #c8a91e; + font-weight: bold; +} + +#addons-page[warning] .global-warning-container { + background-image: linear-gradient(transparent, rgba(255, 255, 0, 0.1)); +} + +#detail-view .global-warning { + padding: 4px 12px; + border-bottom: 1px solid #c1c1c1; +} + +@media (max-width: 600px) { + .global-warning-text { + display: none; + } + + .global-warning .warning-icon { + background-color: #fff; + box-shadow: 0 0 2px 5px #fff; + border-radius: 10px; + } +} + +/*** global informations ***/ + +/* Plugins aren't yet disabled by safemode (bug 342333), + so don't show that warning when viewing plugins. */ +#addons-page[warning="safemode"] .view-pane[type="plugin"] .global-warning-container, +#addons-page[warning="safemode"] #detail-view[loading="true"] .global-warning-container { + background-color: inherit; + background-image: none; +} + + +/*** notification icons ***/ + +.warning-icon, +.error-icon, +.pending-icon, +.info-icon { + width: 16px; + height: 16px; + margin: 3px 0; +} + +.warning-icon { + list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg"); +} + +.error-icon { + list-style-image: url("chrome://mozapps/skin/extensions/alerticon-error.svg"); +} + +.pending-icon, +.info-icon { + list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-positive.svg"); +} + +.addon-view[pending="disable"] .pending-icon, +.addon-view[pending="uninstall"] .pending-icon { + list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg"); +} + +/*** view alert boxes ***/ + +.alert-container { + -moz-box-align: center; + margin-right: 48px; + margin-left: 48px; +} + +.alert-spacer-before { + -moz-box-flex: 1; +} + +.alert-spacer-after { + -moz-box-flex: 3; +} + +.alert { + -moz-box-align: center; + padding: 10px; + color: #333; + border: 1px solid #c1c1c1; + border-radius: 2px; + background-color: #ebebeb; +} + +.alert .alert-title { + font-weight: bold; + font-size: 200%; + margin-bottom: 15px; +} + +.alert button { + margin: 1em 2em; +} + +.loading { + list-style-image: url("chrome://global/skin/icons/loading.png"); + padding-left: 20px; + padding-right: 20px; +} + +@media (min-resolution: 1.1dppx) { + .loading > image { + width: 16px; + list-style-image: url("chrome://global/skin/icons/loading@2x.png"); + } +} + +button.warning { + list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg"); +} + + +/*** category selector ***/ + +#categories { + padding-top: 0; +} + +.category[selected="true"]:hover { + background-color:#1A2533; +} + +.category[disabled] { + overflow: hidden; + height: 0; + min-height: 0; + opacity: 0; + transition-property: min-height, opacity; + transition-duration: 1s, 0.8s; +} + +.category:not([disabled]) { + min-height: 40px; + transition-property: min-height, opacity; + transition-duration: 1s, 0.8s; +} + +/* Maximize the size of the viewport when the window is small */ +@media (max-width: 800px) { + .category-name { + display: none; + } +} + +.category-badge { + background-color: #55D4FF; + padding: 2px 8px; + margin: 6px 0; + margin-inline-start: 6px; + border-radius: 100%; + color: #FFF; + font-weight: bold; + text-align: center; +} + +.category-badge[value="0"] { + display: none; +} + +#category-search > .category-icon { + list-style-image: url("chrome://mozapps/skin/extensions/category-search.png"); +} +#category-discover > .category-icon { + list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png"); +} +#category-locale > .category-icon { + list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png"); +} +#category-extension > .category-icon { + list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.svg"); +} +#category-service > .category-icon { + list-style-image: url("chrome://mozapps/skin/extensions/category-service.png"); +} +#category-theme > .category-icon { + list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png"); +} +#category-plugin > .category-icon { + list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png"); +} +#category-dictionary > .category-icon { + list-style-image: url("chrome://mozapps/skin/extensions/category-dictionaries.png"); +} +#category-experiment > .category-icon { + list-style-image: url("chrome://mozapps/skin/extensions/category-experiments.png"); +} +#category-availableUpdates > .category-icon { + list-style-image: url("chrome://mozapps/skin/extensions/category-available.png"); +} +#category-recentUpdates > .category-icon { + list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png"); +} + + +/*** header ***/ + +#header { + margin-top: 20px; + margin-bottom: 20px; + margin-right: 48px; + margin-left: 48px; +} + +@media (max-width: 600px) { + #header-search { + width: 12em; + } +} + +.view-header { + margin: 0 48px; + border-bottom: 1px solid #c1c1c1; +} + +#header-utils-btn { + height: 30px; + line-height: 20px; + border-color: #c1c1c1; + background-color: #fbfbfb; + padding-right: 10px; + padding-left: 10px; +} + +#header-utils-btn:not([disabled="true"]):active:hover, +#header-utils-btn[open="true"] { + background-color: #dadada; +} + +.header-button { + -moz-appearance: none; + border: 1px solid; + border-radius: 2px; +} + +.header-button[disabled="true"] > .toolbarbutton-icon { + opacity: 0.4; +} + +.header-button:not([disabled="true"]):hover, +#header-utils-btn:not([disabled="true"]):hover { + background-color: #ebebeb; + cursor: pointer; +} + +.header-button > .toolbarbutton-text { + display: none; +} + +.nav-button { + list-style-image: url(chrome://mozapps/skin/extensions/navigation.png); + margin-top: 15px; + margin-bottom: 15px; + border-color: transparent; +} + +.nav-button:not([disabled="true"]):hover { + border-color: #ebebeb; +} + +#back-btn:-moz-locale-dir(ltr), +#forward-btn:-moz-locale-dir(rtl) { + -moz-image-region: rect(0, 18px, 18px, 0); +} + +#back-btn:-moz-locale-dir(rtl), +#forward-btn:-moz-locale-dir(ltr) { + -moz-image-region: rect(0, 36px, 18px, 18px); +} + + +/*** sorters ***/ + +.sort-controls { + -moz-appearance: none; +} + +.sorter { + height: 35px; + border: none; + border-radius: 0; + background-color: transparent; + color: #536680; + margin: 0; + min-width: 12px !important; + -moz-box-direction: reverse; +} + +.sorter .button-box { + padding-top: 0; + padding-bottom: 0; +} + +.sorter[checkState="1"], +.sorter[checkState="2"] { + background-color: #ebebeb; + box-shadow: 0 -4px 0 0 #ff9500 inset; +} + +.sorter .button-icon { + margin-inline-start: 6px; +} + + +/*** discover view ***/ + +.discover-spacer-before, +.discover-spacer-after { + -moz-box-flex: 1; +} + +#discover-error .alert { + max-width: 45em; + -moz-box-flex: 1; +} + +.discover-logo { + list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png"); + margin-inline-end: 15px; +} + +.discover-title { + font-weight: bold; + font-size: 24px; + font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif; + margin: 0 0 15px 0; +} + +.discover-description { + text-align: justify; + margin: 0 0 15px 0; +} + +.discover-footer { + text-align: justify; +} + + +/*** list ***/ + +.list { + -moz-appearance: none; + margin: 0; + border-width: 0 !important; + background-color: transparent; +} + +.list > scrollbox > .scrollbox-innerbox { + border: 1px dotted transparent; +} + +.list:-moz-focusring > scrollbox > .scrollbox-innerbox { + border-color: #0095dd; +} + +.addon { + color: #444; + border-bottom: 1px solid #c1c1c1; + padding: 5px; + background-origin: border-box; +} + +.addon:not(:only-child):last-child { + border-bottom-width: 0; +} + +.details { + cursor: pointer; + margin: 0; + margin-inline-start: 10px; +} + +.icon-container { + width: 48px; + height: 48px; + margin: 3px 7px; + -moz-box-align: center; + -moz-box-pack: center; +} + +.icon { + list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.svg"); + max-width: 32px; + max-height: 32px; +} + +.content-inner-container { + margin-inline-end: 5px; +} + +.addon[active="false"] .icon { + filter: grayscale(1); +} + +.addon-view[type="theme"] .icon { + list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png"); +} + +.addon-view[type="locale"] .icon { + list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png"); +} + +.addon-view[type="plugin"] .icon { + list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png"); +} + +.addon-view[type="dictionary"] .icon { + list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png"); +} + +.addon-view[type="experiment"] .icon { + list-style-image: url("chrome://mozapps/skin/extensions/experimentGeneric.png"); +} + +.name-container { + font-size: 1.3rem; + font-weight: bold; + -moz-box-align: end; + -moz-box-flex: 1; +} + +.creator { + font-weight: bold; +} + +.description-container { + margin-inline-start: 6px; + -moz-box-align: center; + font-size: 1.25rem; +} + +.description { + margin: 0; +} + +.warning, +.pending, +.error { + margin-inline-start: 48px; + font-weight: bold; + -moz-box-align: center; +} + +.content-container, +.basicinfo-container { + -moz-box-align: start; +} + +.addon[status="installing"] > .content-container { + -moz-box-align: stretch; +} + +.update-info-container { + -moz-box-align: center; +} + +.update-available { + -moz-box-align: end; +} + +.install-status-container { + -moz-box-pack: end; + -moz-box-align: end; +} + +.name-outer-container { + -moz-box-pack: center; +} + +.relnotes-toggle-container, +.icon-outer-container { + -moz-box-pack: start; +} + +.status-container, +.control-container { + -moz-box-pack: end; +} + +.addon-view .warning { + color: #d8b826; +} + +.addon-view .error { + color: #e62117; +} + +.addon-view .pending { + color: #62c44e; +} + +.addon-view[pending="disable"] .pending, +.addon-view[pending="uninstall"] .pending { + color: #898989; +} + +.addon .relnotes-container { + -moz-box-align: start; + margin-inline-start: 6px; + height: 0; + overflow: hidden; + opacity: 0; + transition-property: height, opacity; + transition-duration: 0.5s, 0.5s; +} + +.addon[show-relnotes] .relnotes-container { + opacity: 1; + transition-property: height, opacity; + transition-duration: 0.5s, 0.5s; +} + +.addon .relnotes-header { + font-weight: bold; + margin: 10px 0; +} + +.addon .relnotes-toggle { + -moz-appearance: none; + border: none; + background: transparent; + font-weight: bold; + cursor: pointer; +} + +.addon .relnotes-toggle > .button-box > .button-icon { + padding-inline-start: 4px; +} + +.addon-view[notification], +.addon-view[pending] { + --view-highlight-color: transparent; + background-image: radial-gradient(at 50% 0%, + var(--view-highlight-color) 0%, + transparent 75%); +} +.addon-view[notification="warning"] { + --view-highlight-color: #F9F5E5; +} + +.addon-view[notification="error"] { + --view-highlight-color: #FFE8E9; +} + +.addon-view[pending="enable"], +.addon-view[pending="upgrade"], +.addon-view[pending="install"] { + --view-highlight-color: #EFFAF2; +} + +.addon-view[pending="disable"], +.addon-view[pending="uninstall"] { + --view-highlight-color: #F2F2F2; +} + +.addon[selected] { + background-color: #fafafa; + color: #333; + padding-inline-start: 1px; /* compensate the 4px border */ + border-inline-start: solid 4px #ff9500; +} + +.addon[active="false"] > .content-container > .content-inner-container { + color: #999; +} + +.addon[active="false"][selected] > .content-container > .content-inner-container { + color: #777; +} + + +/*** item - uninstalled ***/ + +.addon[status="uninstalled"] { + border: none; +} + +.addon[status="uninstalled"] > .container { + -moz-box-align: center; + padding: 4px 20px; + background-color: #FDFFA8; + border-radius: 8px; + font-size: 120%; +} + +.addon[status="uninstalled"][selected] { + background-color: transparent; +} + + +/*** search view ***/ + +#search-filter { + padding: 5px 20px; + margin-right: 48px; + margin-left: 48px; + font-size: 120%; + border-bottom: 1px solid #c1c1c1; + overflow-x: hidden; +} + +#search-filter-label { + font-weight: bold; + color: grey; + margin-inline-end: 10px; +} + +#search-allresults-link { + margin-top: 1em; + margin-bottom: 2em; +} + + +/*** detail view ***/ + +#detail-view > .box-inherit { + margin-right: 48px; + margin-left: 48px; +} + +#detail-view .loading { + opacity: 0; +} + +#detail-view[loading-extended] .loading { + opacity: 1; + transition-property: opacity; + transition-duration: 1s; +} + +.detail-view-container { + padding-inline-end: 2em; + padding-bottom: 2em; + font-size: 1.25rem; + color: #333; +} + +#detail-notifications { + margin-top: 1em; + margin-bottom: 2em; +} + +#detail-notifications .warning, +#detail-notifications .pending, +#detail-notifications .error { + margin-inline-start: 0; +} + +#detail-icon-container { + width: 64px; + margin-inline-end: 10px; + margin-top: 6px; +} + +#detail-icon { + max-width: 64px; + max-height: 64px; +} + +#detail-summary { + margin-bottom: 2em; +} + +#detail-name-container { + font-size: 2.5rem; + font-weight: normal; +} + +#detail-screenshot-box { + margin-inline-end: 2em; + background-image: linear-gradient(rgba(255,255,255,.5), transparent); + background-color: white; + box-shadow: 0 1px 2px #666; + border-radius: 2px; +} + +#detail-screenshot { + max-width: 300px; + max-height: 300px; +} + +#detail-screenshot[loading] { + background-image: url("chrome://global/skin/icons/loading.png"); + background-position: 50% 50%; + background-repeat: no-repeat; +} + +@media (min-resolution: 1.1dppx) { + #detail-screenshot[loading] { + background-image: url("chrome://global/skin/icons/loading@2x.png"); + background-size: 16px; + } +} + +#detail-screenshot[loading="error"] { + background-image: url("chrome://global/skin/media/error.png"); +} + +#detail-desc-container { + margin-bottom: 2em; +} + +#detail-desc, #detail-fulldesc { + margin-inline-start: 6px; + /* This is necessary to fix layout issues with multi-line descriptions, see + bug 592712*/ + outline: solid transparent; + white-space: pre-wrap; + min-width: 10em; +} + +#detail-fulldesc { + margin-top: 1em; +} + +#detail-contributions { + border-radius: 2px; + border: 1px solid #D2DBE8; + margin-bottom: 2em; + padding: 1em; + background-color: #F3F7FB; +} + +#detail-contrib-description { + font-style: italic; + margin-bottom: 1em; + color: #373D48; +} + +#detail-contrib-suggested { + color: grey; + font-weight: bold; +} + +#detail-contrib-btn { + color: #FFF; + text-shadow: none; + border: 1px solid #0095dd; + list-style-image: url("chrome://mozapps/skin/extensions/heart.png"); + background-color: #0095dd; +} + +#detail-contrib-btn .button-icon { + margin-inline-end: 5px; +} + +#detail-contrib-btn:not(:active):hover { + border-color: #008acb; + background-color: #008acb; +} + +#detail-contrib-btn:active:hover { + background-color: #006b9d; + border-color: #006b9d; +} + +#detail-grid { + margin-bottom: 2em; +} + +#detail-grid > columns > column:first-child { + min-width: 15em; + max-width: 25em; +} + +.detail-row[first-row="true"], +.detail-row-complex[first-row="true"], +setting[first-row="true"] { + border-top: none; +} + +.detail-row, +.detail-row-complex, +setting { + border-top: 1px solid #c1c1c1; + -moz-box-align: center; + min-height: 35px; + line-height: 20px; + text-shadow: 0 1px 1px #fefffe; +} + +#detail-controls { + margin-bottom: 1em; +} + +.inline-options-browser, +setting[first-row="true"] { + margin-top: 2em; +} + +setting { + -moz-box-align: start; +} + +.preferences-alignment { + min-height: 30px; + -moz-box-align: center; +} + +.preferences-description { + font-size: 90.9%; + color: graytext; + margin-top: -2px; + margin-inline-start: 2em; + white-space: pre-wrap; +} + +.preferences-description:empty { + display: none; +} + +setting[type="radio"] > radiogroup { + -moz-box-orient: horizontal; +} + + +/*** creator ***/ + +.creator > label { + margin-inline-start: 0; + margin-inline-end: 0; +} + +.creator > .text-link { + margin-top: 1px; + margin-bottom: 1px; +} + + +/*** rating ***/ + +.meta-rating { + margin-inline-end: 0; + padding-top: 2px; +} + + +/*** download progress ***/ + +.download-progress { + border: 1px solid #c1c1c1; + border-radius: 2px; + background-color: #fbfbfb; + width: 200px; + height: 30px; + margin: 2px 4px; +} + +.download-progress[mode="undetermined"] { + border-color: #0095dd; +} + +.download-progress .start-cap, +.download-progress[complete] .end-cap, +.download-progress[mode="undetermined"] .end-cap, +.download-progress .progress .progress-bar { + -moz-appearance: none; + background-color: #0095dd; +} + +.download-progress .progress .progress-bar { + min-height: 28px; +} + +.download-progress .progress { + -moz-appearance: none; + background-color: transparent; + padding: 0; + margin: 0; + border: none; +} + +.download-progress .start-cap, +.download-progress .end-cap { + width: 4px; +} + +.download-progress .start-cap:-moz-locale-dir(ltr), +.download-progress .end-cap:-moz-locale-dir(rtl) { + border-radius: 1px 0 0 1px; +} + +.download-progress .end-cap:-moz-locale-dir(ltr), +.download-progress .start-cap:-moz-locale-dir(rtl) { + border-radius: 0 1px 1px 0; +} + +.download-progress .cancel { + -moz-appearance: none; + padding: 3px; + min-width: 0; + width: 20px; + height: 20px; + margin: 3px; +} + +.download-progress .cancel .button-box { + /* override in-content/common.css !important rule */ + padding: 0 !important; + border: none; +} + +.download-progress .cancel .button-text { + display: none; +} + +.download-progress .cancel .button-icon { + margin: 0; +} + +.download-progress .cancel { + list-style-image: url('chrome://mozapps/skin/extensions/cancel.png'); +} + +.download-progress .status-container { + -moz-box-align: center; +} + +.download-progress .status { + color: #333; + text-shadow: #fff 0 0 2px; +} + + +/*** install status ***/ + +.install-status { + -moz-box-align: center; +} + + +/*** check for updates ***/ + +#updates-container { + -moz-box-align: center; +} + +#updates-container .button-link { + font-weight: bold; +} + +#updates-installed, +#updates-downloaded { + color: #00BB00; + font-weight: bold; +} + +#update-selected { + margin: 12px; +} + + +/*** buttons ***/ + +.addon-control[disabled="true"]:not(.no-auto-hide) { + display: none; +} + +.no-auto-hide .addon-control { + display: block !important; +} + +button.button-link { + -moz-appearance: none; + background: transparent; + border: none; + box-shadow: none; + color: #0095dd; + cursor: pointer; + min-width: 0; + min-height: 20px; + margin: 0 6px; +} + +button.button-link:not(:-moz-focusring) > .button-box { + border-width: 0; + margin: 1px; +} + +button.button-link:hover { + background-color: transparent; + color: #178ce5; + text-decoration: underline; +} + +/* Needed to override normal button style from inContent.css */ +button.button-link:not([disabled="true"]):active:hover { + background-color: transparent; + color: #ff9500; + text-decoration: none; +} + + +/*** telemetry experiments ***/ + +#detail-experiment-container { + font-size: 80%; + margin-bottom: 1em; +} + +#detail-experiment-bullet-container, +#detail-experiment-state, +#detail-experiment-time, +.experiment-bullet-container, +.experiment-state, +.experiment-time { + vertical-align: middle; + display: inline-block; +} + +.addon .experiment-bullet, +#detail-experiment-bullet { + fill: rgb(158, 158, 158); +} + +.addon[active="true"] .experiment-bullet, +#detail-view[active="true"] #detail-experiment-bullet { + fill: rgb(106, 201, 20); +} + +/*** info UI for add-ons that have been disabled for being unsigned ***/ + +#show-disabled-unsigned-extensions:not(:hover) { + background-color: #fcf8ed; +} + +#disabled-unsigned-addons-info { + margin-bottom: 2em; + margin-right: 48px; + margin-left: 48px; +} + +#disabled-unsigned-addons-heading { + font-size: 1.4em; + font-weight: bold; + margin-bottom: .5em; +} + +#signing-dev-info { + font-style: italic; +} + +#detail-findUpdates-btn[hidden] { + display: -moz-box; + visibility: hidden; +} diff --git a/toolkit/themes/shared/extensions/navigation.png b/toolkit/themes/shared/extensions/navigation.png new file mode 100644 index 000000000..67ff3d9a7 Binary files /dev/null and b/toolkit/themes/shared/extensions/navigation.png differ diff --git a/toolkit/themes/shared/extensions/newaddon.inc.css b/toolkit/themes/shared/extensions/newaddon.inc.css new file mode 100644 index 000000000..52352ccd2 --- /dev/null +++ b/toolkit/themes/shared/extensions/newaddon.inc.css @@ -0,0 +1,114 @@ +%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 +@import url("chrome://global/skin/in-content/common.css"); + +#addon-page { + font-size: 1.1em; +} + +#addon-scrollbox { + overflow: auto; + -moz-box-orient: vertical; + -moz-box-flex: 1; +} + +#spacer-start { + -moz-box-flex: 1; +} + +#spacer-end { + -moz-box-flex: 3; +} + +#addon-container { + overflow: visible; + max-width: 800px; + margin: 20px; + padding: 30px 90px; +} + +#addon-info { + -moz-box-align: start; + margin: 25px 10px; +} + +#icon { + margin-top: 8px; + margin-inline-end: 10px; + max-width: 64px; + max-height: 64px; + list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.svg"); +} + +.addon-info[type="theme"] #icon { + list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png"); +} + +.addon-info[type="locale"] #icon { + list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png"); +} + +.addon-info[type="plugin"] #icon { + list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png"); +} + +.addon-info[type="dictionary"] #icon { + list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png"); +} + +#name { + font-size: 130%; +} + +#author { + color: GrayText; +} + +#location { + color: GrayText; +} + +#warning { + margin-bottom: 25px; + -moz-box-align: start; +} + +#warning-icon { + list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg"); + width: 16px; + height: 16px; + margin-top: 5px; + margin-inline-end: 5px; +} + +#allow { + margin-inline-start: 84px; + margin-bottom: 20px; +} + +#buttonDeck { + margin-top: 25px; + -moz-box-align: stretch; +} + +#continuePanel { + -moz-box-pack: end; + -moz-box-align: end; +} + +#restartPanel { + -moz-box-pack: end; + -moz-box-align: stretch; +} + +#restartPanelButtons { + margin-top: 25px; + -moz-box-pack: end; +} + +#later { + color: GrayText; +} diff --git a/toolkit/themes/shared/extensions/utilities.svg b/toolkit/themes/shared/extensions/utilities.svg new file mode 100644 index 000000000..8bf24458c --- /dev/null +++ b/toolkit/themes/shared/extensions/utilities.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + diff --git a/toolkit/themes/shared/formautofill/requestAutocomplete.css b/toolkit/themes/shared/formautofill/requestAutocomplete.css new file mode 100644 index 000000000..7ddd77c6b --- /dev/null +++ b/toolkit/themes/shared/formautofill/requestAutocomplete.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/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +:root { + height: 100%; + width: 100%; + padding: 0; +} diff --git a/toolkit/themes/shared/icons/find-arrows.svg b/toolkit/themes/shared/icons/find-arrows.svg new file mode 100644 index 000000000..608c0a7db --- /dev/null +++ b/toolkit/themes/shared/icons/find-arrows.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/toolkit/themes/shared/icons/input-clear.svg b/toolkit/themes/shared/icons/input-clear.svg new file mode 100644 index 000000000..0abaaf9b1 --- /dev/null +++ b/toolkit/themes/shared/icons/input-clear.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/toolkit/themes/shared/icons/loading.png b/toolkit/themes/shared/icons/loading.png new file mode 100644 index 000000000..b886c73ef Binary files /dev/null and b/toolkit/themes/shared/icons/loading.png differ diff --git a/toolkit/themes/shared/icons/loading@2x.png b/toolkit/themes/shared/icons/loading@2x.png new file mode 100644 index 000000000..ac928c585 Binary files /dev/null and b/toolkit/themes/shared/icons/loading@2x.png differ diff --git a/toolkit/themes/shared/in-content/check-partial.svg b/toolkit/themes/shared/in-content/check-partial.svg new file mode 100644 index 000000000..e436abf0d --- /dev/null +++ b/toolkit/themes/shared/in-content/check-partial.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/toolkit/themes/shared/in-content/check.svg b/toolkit/themes/shared/in-content/check.svg new file mode 100644 index 000000000..1f9f99cca --- /dev/null +++ b/toolkit/themes/shared/in-content/check.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css new file mode 100644 index 000000000..ecd961d8d --- /dev/null +++ b/toolkit/themes/shared/in-content/common.inc.css @@ -0,0 +1,830 @@ +%if 0 +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +%endif +@namespace html "http://www.w3.org/1999/xhtml"; +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; + +*|*:root { + --in-content-page-color: #424e5a; + --in-content-page-background: #fbfbfb; + --in-content-text-color: #333; + --in-content-selected-text: #fff; + --in-content-header-border-color: #c8c8c8; + --in-content-box-background: #fff; + --in-content-box-background-odd: #f3f6fa; + --in-content-box-background-hover: #ebebeb; + --in-content-box-background-active: #dadada; + --in-content-box-border-color: #c1c1c1; + --in-content-item-hover: rgba(0,149,221,0.25); + --in-content-item-selected: #0095dd; + --in-content-border-highlight: #ff9500; + --in-content-border-focus: #0095dd; + --in-content-border-color: #c1c1c1; + --in-content-category-text: #c1c1c1; + --in-content-category-border-focus: 1px dotted #fff; + --in-content-category-text-selected: #f2f2f2; + --in-content-category-background: #424f5a; + --in-content-category-background-hover: #5e6972; + --in-content-category-background-active: #343f48; + --in-content-tab-color: #424f5a; + --in-content-link-color: #0095dd; + --in-content-link-color-hover: #178ce5; + --in-content-link-color-active: #ff9500; + --in-content-link-color-visited: #551a8b; + --in-content-primary-button-background: #0095dd; + --in-content-primary-button-background-hover: #008acb; + --in-content-primary-button-background-active: #006b9d; + --in-content-table-border-dark-color: #d1d1d1; + --in-content-table-header-background: #0095dd; +} + +html|html, +xul|page, +xul|window { + font: message-box; + -moz-appearance: none; + background-color: var(--in-content-page-background); + color: var(--in-content-page-color); +} + +html|body { + font-size: 15px; + font-weight: normal; + margin: 0; +} + +html|h1 { + font-size: 2.5em; + font-weight: lighter; + line-height: 1.2; + color: var(--in-content-text-color); + margin: 0; + margin-bottom: .5em; +} + +html|hr { + border-style: solid none none none; + border-color: var(--in-content-border-color); +} + +xul|caption { + -moz-appearance: none; + margin: 0; +} + +html|h2, +xul|caption > xul|checkbox, +xul|caption > xul|label { + font-size: 1.3rem; + font-weight: bold; + line-height: 22px; +} + +xul|caption > xul|checkbox, +xul|caption > xul|label { + margin: 0 !important; +} + +*|*.main-content { + padding-top: 40px; + padding-inline-end: 44px; /* compensate the 4px margin of child elements */ + padding-bottom: 48px; + padding-inline-start: 48px; + overflow: auto; +} + +xul|prefpane > xul|*.content-box { + overflow: visible; +} + +/* groupboxes */ + +xul|groupbox { + -moz-appearance: none; + border: none; + margin: 15px 0 0; + padding-inline-start: 0; + padding-inline-end: 0; + font-size: 1.25rem; +} + +xul|groupbox xul|label:not(.menu-accel):not(.menu-text):not(.indent), +xul|groupbox xul|description { + /* !important needed to override toolkit !important rule */ + margin-inline-start: 0 !important; + margin-inline-end: 0 !important; +} + +/* tabpanels and tabs */ + +xul|tabpanels { + -moz-appearance: none; + font-size: 1.25rem; + line-height: 22px; + border: none; + padding: 0; + background-color: transparent; + color: inherit; +} + +xul|tabs { + margin-bottom: 15px; + border-top: 1px solid var(--in-content-box-border-color); + border-bottom: 1px solid var(--in-content-box-border-color); + background-color: var(--in-content-page-background); +} + +xul|*.tabs-left, +xul|*.tabs-right { + border-bottom: none; +} + +xul|tab { + -moz-appearance: none; + margin-top: 0; + padding: 4px 20px; + min-height: 44px; + color: var(--in-content-tab-color); + background-color: var(--in-content-page-background); + border-width: 0; + /* !important overrides tabbox.css RTL and visuallyselected rules */ + border-radius: 0 !important; + transition: background-color 50ms ease 0s; +} + +xul|tab:hover { + background-color: var(--in-content-box-background-hover); +} + +xul|tab[selected] { + background-color: var(--in-content-box-background-hover); + padding-bottom: 0; /* compensate the 4px border */ + border-bottom: 4px solid var(--in-content-border-highlight); +} + +xul|*.tab-text { + font-size: 1.3rem; + line-height: 22px; +} + +/* html buttons */ + +html|button { + padding: 3px; + /* override forms.css */ + font: inherit; +} + +/* xul buttons and menulists */ + +*|button, +html|select, +xul|colorpicker[type="button"], +xul|menulist { + -moz-appearance: none; + min-height: 30px; + color: var(--in-content-text-color); + border: 1px solid var(--in-content-box-border-color); + -moz-border-top-colors: none !important; + -moz-border-right-colors: none !important; + -moz-border-bottom-colors: none !important; + -moz-border-left-colors: none !important; + border-radius: 2px; + background-color: var(--in-content-page-background); +} + +html|button:enabled:hover, +html|select:enabled:hover, +xul|button:not([disabled="true"]):hover, +xul|colorpicker[type="button"]:not([disabled="true"]):hover, +xul|menulist:not([disabled="true"]):hover { + background-color: var(--in-content-box-background-hover); +} + +html|button:enabled:hover:active, +html|select:enabled:hover:active, +xul|button:not([disabled="true"]):hover:active, +xul|colorpicker[type="button"]:not([disabled="true"]):hover:active, +xul|menulist[open="true"]:not([disabled="true"]) { + background-color: var(--in-content-box-background-active); +} + +html|button:disabled, +html|select:disabled, +xul|button[disabled="true"], +xul|colorpicker[type="button"][disabled="true"], +xul|menulist[disabled="true"] { + opacity: 0.5; +} + +*|button.primary { + background-color: var(--in-content-primary-button-background); + border-color: transparent; + color: var(--in-content-selected-text); +} + +html|button.primary:enabled:hover, +xul|button.primary:not([disabled="true"]):hover { + background-color: var(--in-content-primary-button-background-hover); +} + +html|button.primary:enabled:hover:active, +xul|button.primary:not([disabled="true"]):hover:active { + background-color: var(--in-content-primary-button-background-active); +} + +xul|colorpicker[type="button"] { + padding: 6px; + width: 50px; +} + +xul|button > xul|*.button-box, +xul|menulist > xul|*.menulist-label-box { + padding-right: 10px !important; + padding-left: 10px !important; +} + +xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] { + margin-inline-end: 5px; +} + +xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker { + -moz-appearance: none; + margin: 1px 0; + margin-inline-start: 10px; + padding: 0; + width: 10px; + height: 16px; + border: none; + background-color: transparent; + list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown"); +} + +xul|*.help-button { + min-width: 16px; + margin-inline-end: 0; + border-width: 0; + background-image: none; + box-shadow: none; + list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help"); +} + +xul|*.help-button:not([disabled="true"]):hover { + background-image: none; + /* Override default button background */ + background-color: transparent; + list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help-hover"); +} + +xul|*.help-button:not([disabled="true"]):hover:active { + background-image: none; + /* Override default button background */ + background-color: transparent; + list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help-pressed"); +} + +xul|*.close-icon > xul|*.button-box, +xul|*.help-button > xul|*.button-box { + padding-top: 0; + padding-bottom: 0; + padding-right: 0 !important; + padding-left: 0 !important; +} + +xul|*.help-button > xul|*.button-box > xul|*.button-icon { + width: 16px; + height: 16px; +} + +xul|*.help-button > xul|*.button-box > xul|*.button-text { + display: none; +} + +html|*.help-button { + width: 16px; + height: 16px; + border: 0; + padding: 0; + display: inline-block; + background-image: url("chrome://global/skin/in-content/help-glyph.svg#help"); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; +} + +html|*.help-button:hover { + background-image: url("chrome://global/skin/in-content/help-glyph.svg#help-hover"); +} + +html|*.help-button:hover:active { + background-image: url("chrome://global/skin/in-content/help-glyph.svg#help-pressed"); +} + +xul|*.spinbuttons-button { + min-height: initial; + margin-inline-start: 10px !important; + margin-inline-end: 2px !important; +} + +xul|*.spinbuttons-up { + margin-top: 2px !important; + border-radius: 1px 1px 0 0; +} + +xul|*.spinbuttons-down { + margin-bottom: 2px !important; + border-radius: 0 0 1px 1px; +} + +xul|*.spinbuttons-button > xul|*.button-box { + padding: 1px 5px 2px !important; +} + +xul|*.spinbuttons-up > xul|*.button-box > xul|*.button-icon { + list-style-image: url("chrome://global/skin/arrow/arrow-up.gif"); +} + +xul|*.spinbuttons-up[disabled="true"] > xul|*.button-box > xul|*.button-icon { + list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif"); +} + +xul|*.spinbuttons-down > xul|*.button-box > xul|*.button-icon { + list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif"); +} + +xul|*.spinbuttons-down[disabled="true"] > xul|*.button-box > xul|*.button-icon { + list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif"); +} + +xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker { + -moz-appearance: none; + margin-inline-end: 4px; + padding: 0; + border: none; + background-color: transparent; + list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown"); +} + +xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon { + width: 18px; + height: 18px; +} + +xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker { + list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown-disabled") +} + +xul|menulist > xul|menupopup, +xul|button[type="menu"] > xul|menupopup { + -moz-appearance: none; + border: 1px solid var(--in-content-box-border-color); + border-radius: 2px; + background-color: var(--in-content-box-background); +} + +xul|menulist > xul|menupopup xul|menu, +xul|menulist > xul|menupopup xul|menuitem, +xul|button[type="menu"] > xul|menupopup xul|menu, +xul|button[type="menu"] > xul|menupopup xul|menuitem { + -moz-appearance: none; + font-size: 1em; + color: var(--in-content-text-color); + padding-top: 0.2em; + padding-bottom: 0.2em; + padding-inline-start: 10px; + padding-inline-end: 30px; +} + +xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"], +xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"], +xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"], +xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] { + color: var(--in-content-text-color); + background-color: var(--in-content-item-hover); +} + +xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"], +xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"], +xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"], +xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] { + color: var(--in-content-selected-text); + background-color: var(--in-content-item-selected); +} + +xul|menulist > xul|menupopup > xul|menu[disabled="true"], +xul|menulist > xul|menupopup > xul|menuitem[disabled="true"], +xul|button[type="menu"] > xul|menupopup > xul|menu[disabled="true"], +xul|button[type="menu"] > xul|menupopup > xul|menuitem[disabled="true"] { + color: #999; + /* override the [_moz-menuactive="true"] background color from + global/menu.css */ + background-color: transparent; +} + +xul|menulist > xul|menupopup xul|menuseparator, +xul|button[type="menu"] > xul|menupopup xul|menuseparator { + -moz-appearance: none; + margin: 0; + padding: 0; + border-top: 1px solid var(--in-content-box-border-color); + border-bottom: none; +} + +/* textboxes */ + +html|input[type="text"], +html|textarea, +xul|textbox { + -moz-appearance: none; + color: var(--in-content-text-color); + border: 1px solid var(--in-content-box-border-color); + -moz-border-top-colors: none !important; + -moz-border-right-colors: none !important; + -moz-border-bottom-colors: none !important; + -moz-border-left-colors: none !important; + border-radius: 2px; + background-color: var(--in-content-box-background); +} + +xul|textbox { + min-height: 30px; + padding-right: 10px; + padding-left: 10px; +} + +/* Create a separate rule to unset these styles on .tree-input instead of + using :not(.tree-input) so the selector specifity doesn't change. */ +xul|textbox.tree-input { + min-height: unset; + padding-right: unset; + padding-left: unset; +} + +html|input[type="text"], +html|textarea { + font-family: inherit; + font-size: inherit; + padding: 5px 10px; +} + +html|input[type="text"]:focus, +html|textarea:focus, +xul|textbox[focused] { + border-color: var(--in-content-border-focus); +} + +html|input[type="text"]:disabled, +html|textarea:disabled, +xul|textbox[disabled="true"] { + opacity: 0.5; +} + +/* Links */ + +html|a, +.text-link { + color: var(--in-content-link-color); + text-decoration: none; +} + +html|a:hover, +.text-link:hover { + color: var(--in-content-link-color-hover); + text-decoration: underline; +} + +html|a:visited { + color: var(--in-content-link-color-visited); +} + +html|a:hover:active, +.text-link:hover:active { + color: var(--in-content-link-color-active); + text-decoration: none; +} + +/* Checkboxes and radio buttons */ + +/* Hide the actual checkbox */ +html|input[type="checkbox"] { + opacity: 0; + width: 0; + pointer-events: none; + position: absolute; +} + +/* Create a box to style as the checkbox */ +html|input[type="checkbox"] + html|label:before { + display: inline-block; + content: ""; + vertical-align: middle; +} + +html|input[type="checkbox"] + html|label { + line-height: 0px; +} + +xul|checkbox { + margin-inline-start: 0; +} + +xul|*.checkbox-check, +html|input[type="checkbox"] + html|label:before { + -moz-appearance: none; + width: 23px; + height: 23px; + border-radius: 2px; + border: 1px solid var(--in-content-box-border-color); + margin-inline-end: 10px; + background-color: #f1f1f1; + /* !important needed to override toolkit checked !important rule */ + background-image: linear-gradient(#fff, rgba(255,255,255,0.8)) !important; + background-position: center center; + background-repeat: no-repeat; + box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03); +} + +xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, +html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { + border-color: var(--in-content-border-focus); +} + +xul|*.checkbox-check[checked] { + list-style-image: url("chrome://global/skin/in-content/check.svg#check"); +} + +html|input[type="checkbox"]:checked + html|label:before { + background-image: url("chrome://global/skin/in-content/check.svg#check"), linear-gradient(#fff, rgba(255,255,255,0.8)) !important; +} + +xul|checkbox[disabled="true"] > xul|*.checkbox-check, +html|input[type="checkbox"]:disabled + html|label { + opacity: 0.5; +} + +xul|*.checkbox-label-box { + margin-inline-start: -1px; /* negative margin for the transparent border */ + padding-inline-start: 0; +} + +xul|richlistitem > xul|*.checkbox-check { + margin: 3px 6px; +} + +html|*.toggle-container-with-text { + display: flex; + align-items: center; +} + +xul|radio { + margin-inline-start: 0; +} + +xul|*.radio-check { + -moz-appearance: none; + width: 23px; + height: 23px; + border: 1px solid var(--in-content-box-border-color); + border-radius: 50%; + margin-inline-end: 10px; + background-color: #f1f1f1; + background-image: linear-gradient(#fff, rgba(255,255,255,0.80)); + box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03); +} + +xul|radio:not([disabled="true"]):hover > xul|*.radio-check { + border-color: var(--in-content-border-focus); +} + +xul|*.radio-check[selected] { + list-style-image: url("chrome://global/skin/in-content/radio.svg#radio"); +} + +xul|radio[disabled="true"] > xul|*.radio-check { + opacity: 0.5; +} + +xul|*.radio-label-box { + margin-inline-start: -1px; /* negative margin for the transparent border */ + margin-inline-end: 10px; + padding-inline-start: 0; +} + +/* Category List */ + +*|*#categories { + -moz-appearance: none; + background-color: var(--in-content-category-background); + padding-top: 39px; + margin: 0; + border-width: 0; +} + +*|*.category { + -moz-appearance: none; + color: var(--in-content-category-text); + border-inline-end-width: 0; + padding-inline-start: 15px; + padding-inline-end: 21px; + min-height: 40px; + transition: background-color 150ms; +} + +*|*.category:hover { + background-color: var(--in-content-category-background-hover); +} + +*|*.category[selected], +*|*.category.selected { + background-color: var(--in-content-category-background-active); + color: var(--in-content-category-text-selected); + padding-inline-start: 11px; /* compensate the 4px border */ + border-inline-start: solid 4px var(--in-content-border-highlight); +} + +*|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] { + border-top: var(--in-content-category-border-focus); + border-bottom: var(--in-content-category-border-focus); +} + +*|*.category-name { + line-height: 22px; + font-size: 1.25rem; + padding-bottom: 2px; + padding-inline-start: 9px; + margin: 0; + -moz-user-select: none; +} + +*|*.category-icon { + width: 24px; + height: 24px; +} + +/* header */ + +*|*.header { + border-bottom: 1px solid var(--in-content-header-border-color); + margin-inline-end: 4px; /* add the 4px end-margin of other elements */ + margin-bottom: 15px; + padding-bottom: 15px; + -moz-box-align: baseline; +} + +*|*.header-name { + font-size: 2.5rem; + font-weight: normal; + line-height: 40px; + margin: 0; + -moz-user-select: none; +} + +/* File fields */ + +xul|filefield { + -moz-appearance: none; + background-color: transparent; + border: none; + padding: 0; +} + +xul|*.fileFieldContentBox { + background-color: transparent; +} + +xul|*.fileFieldIcon { + margin-inline-start: 10px; + margin-inline-end: 0; +} + +xul|*.fileFieldLabel { + margin-inline-start: -26px; + padding-inline-start: 36px; +} + +xul|textbox:-moz-locale-dir(rtl), +xul|*.fileFieldLabel:-moz-locale-dir(rtl), +xul|textbox + xul|button:-moz-locale-dir(ltr), +xul|filefield + xul|button:-moz-locale-dir(ltr) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +xul|textbox:-moz-locale-dir(ltr), +xul|*.fileFieldLabel:-moz-locale-dir(ltr), +xul|textbox + xul|button:-moz-locale-dir(rtl), +xul|filefield + xul|button:-moz-locale-dir(rtl) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +xul|textbox + xul|button, +xul|filefield + xul|button { + border-inline-start: none; +} + +/* List boxes */ + +xul|richlistbox, +xul|listbox { + -moz-appearance: none; + margin-inline-start: 0; + background-color: var(--in-content-box-background); + border: 1px solid var(--in-content-box-border-color); + color: var(--in-content-text-color); +} + +xul|treechildren::-moz-tree-row, +xul|listbox xul|listitem { + padding: 0.3em; + margin: 0; + border: none; + border-radius: 0; + background-image: none; +} + +xul|treechildren::-moz-tree-row(hover), +xul|listbox xul|listitem:hover { + background-color: var(--in-content-item-hover); +} + +xul|treechildren::-moz-tree-row(selected), +xul|listbox xul|listitem[selected="true"] { + background-color: var(--in-content-item-selected); + color: var(--in-content-selected-text); +} + +/* Trees */ + +xul|tree { + -moz-appearance: none; + font-size: 1em; + border: 1px solid var(--in-content-box-border-color); + background-color: var(--in-content-box-background); + margin: 0; +} + +xul|tree:-moz-focusring, +xul|richlistbox:-moz-focusring { + border: 1px dotted var(--in-content-border-focus); +} + +xul|listheader, +xul|treecols { + -moz-appearance: none; + border: none; + border-bottom: 1px solid var(--in-content-border-color); + padding: 0; +} + +.autocomplete-tree > xul|treecols { + border-bottom: none !important; +} + +xul|treecol:not([hideheader="true"]), +xul|treecolpicker { + -moz-appearance: none; + border: none; + background-color: var(--in-content-box-background-hover); + color: #808080; + padding: 5px 10px; +} + +xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover, +xul|treecolpicker:hover { + background-color: var(--in-content-box-background-active); + color: var(--in-content-text-color); +} + +xul|treecol:not([hideheader="true"]):not(:first-child), +xul|treecolpicker { + border-inline-start-width: 1px; + border-inline-start-style: solid; + border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1; +} + +xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { + list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown"); + width: 18px; + height: 18px; +} + +xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] { + transform: scaleY(-1); +} + +/* This is the only way to increase the height of a tree row unfortunately */ +xul|treechildren::-moz-tree-row { + min-height: 2em; +} + +/* Color needs to be set on tree cell in order to be applied */ +xul|treechildren::-moz-tree-cell-text { + color: var(--in-content-text-color); +} + +xul|treechildren::-moz-tree-cell-text(selected) { + color: var(--in-content-selected-text); +} diff --git a/toolkit/themes/shared/in-content/dropdown.svg b/toolkit/themes/shared/in-content/dropdown.svg new file mode 100644 index 000000000..bc7bad2c5 --- /dev/null +++ b/toolkit/themes/shared/in-content/dropdown.svg @@ -0,0 +1,22 @@ + + + + + + + + + + diff --git a/toolkit/themes/shared/in-content/help-glyph.svg b/toolkit/themes/shared/in-content/help-glyph.svg new file mode 100644 index 000000000..5dc3af4e1 --- /dev/null +++ b/toolkit/themes/shared/in-content/help-glyph.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + diff --git a/toolkit/themes/shared/in-content/info-pages.inc.css b/toolkit/themes/shared/in-content/info-pages.inc.css new file mode 100644 index 000000000..4889602a0 --- /dev/null +++ b/toolkit/themes/shared/in-content/info-pages.inc.css @@ -0,0 +1,109 @@ +% This Source Code Form is subject to the terms of the Mozilla Public +% License, v. 2.0. If a copy of the MPL was not distributed with this +% file, You can obtain one at http://mozilla.org/MPL/2.0/. + +@import url("chrome://global/skin/in-content/common.css"); +/* Body and container */ +body { + display: flex; + flex-direction: column; + box-sizing: border-box; + min-height: 100vh; + padding-top: 0; + padding-bottom: 0; + padding-inline-start: calc(48px + 4.6em); + padding-inline-end: 48px; + align-items: center; + justify-content: center; +} + +.container { + min-width: 13em; + max-width: 52em; +} + +.container.restore-chosen { + display: flex; + flex-direction: column; + flex-grow: 1; + margin: 10vh 0; +} + +/* Typography */ +.title { + background-image: url("chrome://global/skin/icons/info.svg"); + background-position: left 0; + background-repeat: no-repeat; + background-size: 1.6em; + margin-inline-start: -2.3em; + padding-inline-start: 2.3em; + font-size: 2.5em; +} + +.title:dir(rtl) { + background-position: right 0; +} + +.title-text { + border-bottom: 1px solid #C1C1C1; + font-size: inherit; + padding-bottom: 0.4em; +} + +@media (max-width: 675px) { + body { + padding: 0 48px; + } + + .title { + background-image: none !important; + padding-inline-start: 0; + margin-inline-start: 0; + } + + .title-text { + padding-top: 0; + } +} + +ul, ol { + margin: 0; + padding: 0; + margin-inline-start: 1em; +} + +ul > li, ol > li { + margin-bottom: .5em; +} + +ul { + list-style: disc; +} + +/* Buttons */ +.button-container { + margin-top: 1.2em; +} + +.button-container > button { + min-width: 150px; +} + +.button-container > button:first-child { + margin-inline-start: 0; +} + +/* Trees */ +.tree-container { + margin-top: 1.2em; + flex-grow: 1; + min-height: 12em; +} + +.tree-container > tree { + height: 100%; +} + +tree { + width: 100%; +} diff --git a/toolkit/themes/shared/in-content/radio.svg b/toolkit/themes/shared/in-content/radio.svg new file mode 100644 index 000000000..97826bc20 --- /dev/null +++ b/toolkit/themes/shared/in-content/radio.svg @@ -0,0 +1,22 @@ + + + + + + + + + + diff --git a/toolkit/themes/shared/incontent-icons/blocked.svg b/toolkit/themes/shared/incontent-icons/blocked.svg new file mode 100644 index 000000000..2f1c6413c --- /dev/null +++ b/toolkit/themes/shared/incontent-icons/blocked.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/toolkit/themes/shared/incontent-icons/info.svg b/toolkit/themes/shared/incontent-icons/info.svg new file mode 100644 index 000000000..2fc0607a1 --- /dev/null +++ b/toolkit/themes/shared/incontent-icons/info.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/toolkit/themes/shared/incontent-icons/warning.svg b/toolkit/themes/shared/incontent-icons/warning.svg new file mode 100644 index 000000000..bde2da120 --- /dev/null +++ b/toolkit/themes/shared/incontent-icons/warning.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn new file mode 100644 index 000000000..9c3d86a40 --- /dev/null +++ b/toolkit/themes/shared/jar.inc.mn @@ -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/. + +# 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/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/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/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/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) + 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/menu/shared-menu-check@2x.png (../../shared/menu-check@2x.png) + skin/classic/global/menu/shared-menu-check.png (../../shared/menu-check.png) + skin/classic/global/menu/shared-menu-check-active.svg (../../shared/menu-check-active.svg) + skin/classic/global/menu/shared-menu-check-black.svg (../../shared/menu-check-black.svg) + skin/classic/global/menu/shared-menu-check-hover.svg (../../shared/menu-check-hover.svg) + skin/classic/global/in-content/check.svg (../../shared/in-content/check.svg) + skin/classic/global/in-content/check-partial.svg (../../shared/in-content/check-partial.svg) + skin/classic/global/in-content/dropdown.svg (../../shared/in-content/dropdown.svg) + skin/classic/global/in-content/help-glyph.svg (../../shared/in-content/help-glyph.svg) + skin/classic/global/in-content/radio.svg (../../shared/in-content/radio.svg) + skin/classic/global/passwordmgr.css (../../shared/passwordmgr.css) + skin/classic/global/reader/RM-Close-24x24.svg (../../shared/reader/RM-Close-24x24.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/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.png (../../shared/media/pauseButton.png) + skin/classic/global/media/pauseButton@2x.png (../../shared/media/pauseButton@2x.png) + skin/classic/global/media/playButton.png (../../shared/media/playButton.png) + skin/classic/global/media/playButton@2x.png (../../shared/media/playButton@2x.png) + skin/classic/global/media/muteButton.png (../../shared/media/muteButton.png) + skin/classic/global/media/muteButton@2x.png (../../shared/media/muteButton@2x.png) + skin/classic/global/media/unmuteButton.png (../../shared/media/unmuteButton.png) + skin/classic/global/media/unmuteButton@2x.png (../../shared/media/unmuteButton@2x.png) + skin/classic/global/media/noAudio.png (../../shared/media/noAudio.png) + skin/classic/global/media/noAudio@2x.png (../../shared/media/noAudio@2x.png) + skin/classic/global/media/closeCaptionButton.png (../../shared/media/closeCaptionButton.png) + skin/classic/global/media/closeCaptionButton@2x.png (../../shared/media/closeCaptionButton@2x.png) + skin/classic/global/media/fullscreenButton.png (../../shared/media/fullscreenButton.png) + skin/classic/global/media/fullscreenButton@2x.png (../../shared/media/fullscreenButton@2x.png) + skin/classic/global/media/scrubberThumb.png (../../shared/media/scrubberThumb.png) + skin/classic/global/media/scrubberThumb@2x.png (../../shared/media/scrubberThumb@2x.png) + skin/classic/global/media/scrubberThumbWide.png (../../shared/media/scrubberThumbWide.png) + skin/classic/global/media/scrubberThumbWide@2x.png (../../shared/media/scrubberThumbWide@2x.png) + 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/volume-empty.png (../../shared/media/volume-empty.png) + skin/classic/global/media/volume-empty@2x.png (../../shared/media/volume-empty@2x.png) + skin/classic/global/media/volume-full.png (../../shared/media/volume-full.png) + skin/classic/global/media/volume-full@2x.png (../../shared/media/volume-full@2x.png) + skin/classic/global/media/clicktoplay-bgtexture.png (../../shared/media/clicktoplay-bgtexture.png) + skin/classic/global/media/videoClickToPlayButton.svg (../../shared/media/videoClickToPlayButton.svg) +#ifdef MOZ_PLACES + skin/classic/mozapps/places/defaultFavicon.png (../../shared/places/defaultFavicon.png) + skin/classic/mozapps/places/defaultFavicon@2x.png (../../shared/places/defaultFavicon@2x.png) + skin/classic/mozapps/places/defaultFavicon-inverted.png (../../shared/places/defaultFavicon-inverted.png) + skin/classic/mozapps/places/defaultFavicon-inverted@2x.png (../../shared/places/defaultFavicon-inverted@2x.png) +#endif diff --git a/toolkit/themes/shared/media/TopLevelImageDocument.css b/toolkit/themes/shared/media/TopLevelImageDocument.css new file mode 100644 index 000000000..524217516 --- /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 000000000..760cdcd53 --- /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 15px #000; +} diff --git a/toolkit/themes/shared/media/clicktoplay-bgtexture.png b/toolkit/themes/shared/media/clicktoplay-bgtexture.png new file mode 100644 index 000000000..caffc241c Binary files /dev/null and b/toolkit/themes/shared/media/clicktoplay-bgtexture.png differ diff --git a/toolkit/themes/shared/media/closeCaptionButton.png b/toolkit/themes/shared/media/closeCaptionButton.png new file mode 100644 index 000000000..469310fb1 Binary files /dev/null and b/toolkit/themes/shared/media/closeCaptionButton.png differ diff --git a/toolkit/themes/shared/media/closeCaptionButton@2x.png b/toolkit/themes/shared/media/closeCaptionButton@2x.png new file mode 100644 index 000000000..033507892 Binary files /dev/null and b/toolkit/themes/shared/media/closeCaptionButton@2x.png differ diff --git a/toolkit/themes/shared/media/error.png b/toolkit/themes/shared/media/error.png new file mode 100644 index 000000000..58e37283a Binary files /dev/null and b/toolkit/themes/shared/media/error.png differ diff --git a/toolkit/themes/shared/media/fullscreenButton.png b/toolkit/themes/shared/media/fullscreenButton.png new file mode 100644 index 000000000..ffbc3d5ae Binary files /dev/null and b/toolkit/themes/shared/media/fullscreenButton.png differ diff --git a/toolkit/themes/shared/media/fullscreenButton@2x.png b/toolkit/themes/shared/media/fullscreenButton@2x.png new file mode 100644 index 000000000..b09ebbd43 Binary files /dev/null and b/toolkit/themes/shared/media/fullscreenButton@2x.png differ diff --git a/toolkit/themes/shared/media/imagedoc-darknoise.png b/toolkit/themes/shared/media/imagedoc-darknoise.png new file mode 100644 index 000000000..5c33e24d4 Binary files /dev/null and b/toolkit/themes/shared/media/imagedoc-darknoise.png differ diff --git a/toolkit/themes/shared/media/imagedoc-lightnoise.png b/toolkit/themes/shared/media/imagedoc-lightnoise.png new file mode 100644 index 000000000..3467cf4d4 Binary files /dev/null and b/toolkit/themes/shared/media/imagedoc-lightnoise.png differ diff --git a/toolkit/themes/shared/media/muteButton.png b/toolkit/themes/shared/media/muteButton.png new file mode 100644 index 000000000..894480761 Binary files /dev/null and b/toolkit/themes/shared/media/muteButton.png differ diff --git a/toolkit/themes/shared/media/muteButton@2x.png b/toolkit/themes/shared/media/muteButton@2x.png new file mode 100644 index 000000000..b2cd21c5e Binary files /dev/null and b/toolkit/themes/shared/media/muteButton@2x.png differ diff --git a/toolkit/themes/shared/media/noAudio.png b/toolkit/themes/shared/media/noAudio.png new file mode 100644 index 000000000..3db8c973b Binary files /dev/null and b/toolkit/themes/shared/media/noAudio.png differ diff --git a/toolkit/themes/shared/media/noAudio@2x.png b/toolkit/themes/shared/media/noAudio@2x.png new file mode 100644 index 000000000..7de728b2d Binary files /dev/null and b/toolkit/themes/shared/media/noAudio@2x.png differ diff --git a/toolkit/themes/shared/media/pauseButton.png b/toolkit/themes/shared/media/pauseButton.png new file mode 100644 index 000000000..944098ca1 Binary files /dev/null and b/toolkit/themes/shared/media/pauseButton.png differ diff --git a/toolkit/themes/shared/media/pauseButton@2x.png b/toolkit/themes/shared/media/pauseButton@2x.png new file mode 100644 index 000000000..df2291941 Binary files /dev/null and b/toolkit/themes/shared/media/pauseButton@2x.png differ diff --git a/toolkit/themes/shared/media/playButton.png b/toolkit/themes/shared/media/playButton.png new file mode 100644 index 000000000..11e2731df Binary files /dev/null and b/toolkit/themes/shared/media/playButton.png differ diff --git a/toolkit/themes/shared/media/playButton@2x.png b/toolkit/themes/shared/media/playButton@2x.png new file mode 100644 index 000000000..fb20075b2 Binary files /dev/null and b/toolkit/themes/shared/media/playButton@2x.png differ diff --git a/toolkit/themes/shared/media/scrubberThumb.png b/toolkit/themes/shared/media/scrubberThumb.png new file mode 100644 index 000000000..f15962763 Binary files /dev/null and b/toolkit/themes/shared/media/scrubberThumb.png differ diff --git a/toolkit/themes/shared/media/scrubberThumb@2x.png b/toolkit/themes/shared/media/scrubberThumb@2x.png new file mode 100644 index 000000000..f8790f467 Binary files /dev/null and b/toolkit/themes/shared/media/scrubberThumb@2x.png differ diff --git a/toolkit/themes/shared/media/scrubberThumbWide.png b/toolkit/themes/shared/media/scrubberThumbWide.png new file mode 100644 index 000000000..96d2ed751 Binary files /dev/null and b/toolkit/themes/shared/media/scrubberThumbWide.png differ diff --git a/toolkit/themes/shared/media/scrubberThumbWide@2x.png b/toolkit/themes/shared/media/scrubberThumbWide@2x.png new file mode 100644 index 000000000..52c9d7272 Binary files /dev/null and b/toolkit/themes/shared/media/scrubberThumbWide@2x.png differ diff --git a/toolkit/themes/shared/media/stalled.png b/toolkit/themes/shared/media/stalled.png new file mode 100644 index 000000000..525375889 Binary files /dev/null and b/toolkit/themes/shared/media/stalled.png differ diff --git a/toolkit/themes/shared/media/throbber.png b/toolkit/themes/shared/media/throbber.png new file mode 100644 index 000000000..8e49fe5b2 Binary files /dev/null and b/toolkit/themes/shared/media/throbber.png differ diff --git a/toolkit/themes/shared/media/unmuteButton.png b/toolkit/themes/shared/media/unmuteButton.png new file mode 100644 index 000000000..5b76e2fa4 Binary files /dev/null and b/toolkit/themes/shared/media/unmuteButton.png differ diff --git a/toolkit/themes/shared/media/unmuteButton@2x.png b/toolkit/themes/shared/media/unmuteButton@2x.png new file mode 100644 index 000000000..86f21859e Binary files /dev/null and b/toolkit/themes/shared/media/unmuteButton@2x.png differ diff --git a/toolkit/themes/shared/media/videoClickToPlayButton.svg b/toolkit/themes/shared/media/videoClickToPlayButton.svg new file mode 100644 index 000000000..f7ca6b653 --- /dev/null +++ b/toolkit/themes/shared/media/videoClickToPlayButton.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/toolkit/themes/shared/media/videocontrols.css b/toolkit/themes/shared/media/videocontrols.css new file mode 100644 index 000000000..a40d77fe3 --- /dev/null +++ b/toolkit/themes/shared/media/videocontrols.css @@ -0,0 +1,440 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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"); + +.controlBar { + height: 28px; + background-color: rgba(35,31,32,.74); +} + +.playButton, +.muteButton, +.closedCaptionButton, +.fullscreenButton { + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + -moz-appearance: none; /* Remove the native button appearance and styling */ + margin: 0; + padding: 0; + min-height: 28px; + min-width: 28px; + border: none; + opacity: 0.7; +} + +.playButton:hover, +.muteButton:hover, +.closedCaptionButton:hover, +.fullscreenButton:hover { + opacity: 1; +} + +.playButton:hover:active, +.muteButton:hover:active, +.closedCaptionButton:hover:active, +.fullscreenButton:hover:active { + opacity: 0.4; +} + +.playButton { + background-image: url(chrome://global/skin/media/pauseButton.png); + margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */ + position: relative; /* Trick to work around negative margin interfering with clicking on the button. */ +} + +.playButton[paused] { + background-image: url(chrome://global/skin/media/playButton.png); +} + +.muteButton { + background-image: url(chrome://global/skin/media/muteButton.png); + min-width: 33px; +} +.muteButton[muted] { + background-image: url(chrome://global/skin/media/unmuteButton.png); +} + +.muteButton[noAudio] { + background-image: url(chrome://global/skin/media/noAudio.png); +} + +.muteButton[noAudio] + .volumeStack { + display: none; +} + +.closedCaptionButton { + background-image: url(chrome://global/skin/media/closeCaptionButton.png); + background-position: 4px; +} + +.closedCaptionButton[enabled] { + opacity: 1; +} + +.closedCaptionButton[hidden] { + display: none; +} + +.fullscreenButton { + background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0); +} + +.fullscreenButton[fullscreened] { + background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16); +} + +.volumeControl { + width: 32px; + opacity: 0; +} + +.volumeBackground, +.volumeForeground { + background-repeat: no-repeat; + background-position: center; + width: 32px; +} + +.volumeBackground { + background-image: url(chrome://global/skin/media/volume-empty.png); +} + +.volumeForeground { + background-image: url(chrome://global/skin/media/volume-full.png); + background-clip: content-box; +} + +.textTrackList { + display: -moz-box; + -moz-appearance: none; + -moz-box-pack: end; + -moz-box-align: end; + padding: 0; +} + +.textTrackList[hidden] { + display: none; +} + +.textTrackList > html|*.textTrackItem { + -moz-appearance: none; + -moz-box-align: start; + text-align: start; + overflow: hidden; + margin: 0; + padding: 2px 10px; + -moz-margin-end: 10px; + border: none; + color: rgba(255,255,255,.5); + background-color: rgba(35,31,32,.74); + white-space: nowrap; +} + +.textTrackList > html|*.textTrackItem[on] { + color: white; + background-color: black; +} + +.textTrackList > html|*.textTrackItem:hover { + background-color: rgba(0,0,0,.55); +} + +.controlBar[fullscreen-unavailable] { + /* This value is duplicated in the videocontrols.xml adjustControlSize function. */ + padding-inline-end: 8px; +} + +.volumeControl .scale-thumb { + min-width: 0; + opacity: 0; +} + +.durationBox { + -moz-box-pack: center; +} + +.durationLabel { + margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */ + padding-left: 8px; /* don't bump into the scrubber bar */ + color: rgba(255,255,255,.75); + font: message-box; + font-size: 11px; +} + +%ifdef XP_MACOSX +.durationLabel { + padding-top: 2px; /* center vertically with scrubber bar */ +} +%else +.durationLabel { + padding-top: 0; /* center vertically with scrubber bar */ +} +%endif + +.positionLabel { + display: none; +} + +.backgroundBar { + /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ + /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ + margin: 10px 22px; + background-color: rgba(255,255,255,.5); + border-radius: 2.5px; +} + +.bufferBar, +.progressBar { + /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ + /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ + margin: 10px 22px; + -moz-appearance: none; + border: none; + background-color: transparent; + min-width: 0; + min-height: 0; +} + +/* .progress-bar is an element inside the implementation. */ +.bufferBar .progress-bar { + /* + * Note that this is drawn on top of the .backgroundBar. So although this + * has the same background-color specified, the semitransparent + * compositing gives it a different visual appearance. + */ + background-color: rgba(255,255,255,.5); + border-radius: 2.5px; + -moz-appearance: none; +} + +.progressBar .progress-bar { + background-color: white; + border-radius: 2.5px; + -moz-appearance: none; +} + +/* .scale-slider is an element inside the implementation. */ +.scrubber .scale-slider, +.volumeControl .scale-slider { + /* Hide the default horizontal bar. */ + -moz-appearance: none; + background: none; + margin: 0; +} + +.scrubber .scale-slider { + /* abs(margin-top) + margin-bottom + bar height == timeThumb height */ + margin-top: -10px; + margin-bottom: 10px; +} +/* .scale-thumb is an element inside the implementation. */ +.scrubber .scale-thumb, +.volumeControl .scale-thumb { + /* Override the default thumb appearance with a custom image. */ + -moz-appearance: none; + background: transparent; + border: none; +} + +.timeThumb { + background: url(chrome://global/skin/media/scrubberThumb.png) no-repeat center; + min-width: 45px; + min-height: 28px; + -moz-box-pack: center; +} + +.timeThumb[showhours="true"] { + background-image: url(chrome://global/skin/media/scrubberThumbWide.png); +} + +.timeLabel { + color: rgba(255,255,255,.75); + font: message-box; + font-size: 10px; + text-shadow: rgba(0,0,0,.3) 0 1px; + padding-top: 7px; +} + +%ifdef XP_MACOSX +.timeLabel { + padding-top: 7px; /* center vertically with scrubber bar */ +} +%else +.timeLabel { + padding-top: 5px; /* center vertically with scrubber bar */ +} +%endif + +.statusOverlay { + -moz-box-align: center; + -moz-box-pack: center; + background-color: rgba(0,0,0,.55); +} + +.statusIcon { + margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */ + width: 36px; + height: 36px; +} + +.statusIcon[type="throbber"] { + background: url(chrome://global/skin/media/throbber.png) no-repeat center; +} + +.statusIcon[type="throbber"][stalled] { + background: url(chrome://global/skin/media/stalled.png) no-repeat center; +} + +.statusIcon[type="error"] { + background: url(chrome://global/skin/media/error.png) no-repeat center; +} + +/* Overlay Play button */ +.clickToPlay { + width: 64px; + height: 64px; + -moz-box-pack: center; + -moz-box-align: center; + opacity: 0.7; + background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png), + url(chrome://global/skin/media/videoClickToPlayButton.svg); + background-repeat: repeat, no-repeat; + background-position: center, center; + background-size: auto, 64px 64px; + background-color: hsla(0,0%,10%,.5); +} +.clickToPlay:hover { + opacity: 1; +} + +/* Statistics formatting */ +html|*.statsDiv { + position: relative; +} +html|td { + height: 1em; + max-height: 1em; + padding: 0 2px; +} +html|table { + font-family: Helvetica, Arial, sans-serif; + font-size: 11px; + color: white; + text-shadow: + -1px -1px 0 #000, + 1px -1px 0 #000, + -1px 1px 0 #000, + 1px 1px 0 #000; + min-width: 100%; + background: rgba(68,68,68,.7); + table-layout: fixed; + border-collapse: collapse; + position: absolute; +} + +/* CSS Transitions */ +.clickToPlay { + transition-property: opacity, background-size; + transition-duration: 400ms, 400ms; +} +.clickToPlay[fadeout] { + background-size: auto, 192px 192px; + opacity: 0; +} +.clickToPlay[fadeout][immediate] { + transition-property: opacity, background-size; + transition-duration: 0s, 0s; +} +.controlBar:not([immediate]) { + transition-property: opacity; + transition-duration: 200ms; +} +.controlBar[fadeout] { + opacity: 0; +} +.volumeStack:not([immediate]) { + transition-property: opacity, margin-top; + transition-duration: 200ms, 200ms; +} +.volumeStack[fadeout] { + opacity: 0; + margin-top: 0; +} +.statusOverlay:not([immediate]) { + transition-property: opacity; + transition-duration: 300ms; + transition-delay: 750ms; +} +.statusOverlay[fadeout] { + opacity: 0; +} + +/* Error description formatting */ +.errorLabel { + font-family: Helvetica, Arial, sans-serif; + font-size: 11px; + color: #bbb; + text-shadow: + -1px -1px 0 #000, + 1px -1px 0 #000, + -1px 1px 0 #000, + 1px 1px 0 #000; + padding: 0 10px; + text-align: center; +} + +@media (min-resolution: 2dppx) { + .playButton { + background-image: url(chrome://global/skin/media/pauseButton@2x.png); + background-size: 28px 28px; + } + .playButton[paused] { + background-image: url(chrome://global/skin/media/playButton@2x.png); + background-size: 28px 28px; + } + .volumeBackground { + background-image: url(chrome://global/skin/media/volume-empty@2x.png); + background-size: 32px 16px; + } + .volumeForeground { + background-image: url(chrome://global/skin/media/volume-full@2x.png); + background-size: 32px 16px; + } + .muteButton { + background-image: url(chrome://global/skin/media/muteButton@2x.png); + background-size: 33px 28px; + } + .muteButton[muted] { + background-image: url(chrome://global/skin/media/unmuteButton@2x.png); + background-size: 33px 28px; + } + .muteButton[noAudio] { + background-image: url(chrome://global/skin/media/noAudio@2x.png); + background-size: 33px 28px; + } + .closedCaptionButton { + background-image: url(chrome://global/skin/media/closeCaptionButton@2x.png); + background-position: 4px; + background-size: 28px 28px; + } + .fullscreenButton { + background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 32, 32, 0); + background-size: 16px 16px; + } + .fullscreenButton[fullscreened] { + background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 64, 32, 32); + background-size: 16px 16px; + } + .timeThumb { + background-image: url(chrome://global/skin/media/scrubberThumb@2x.png); + background-size: 33px 28px; + } + .timeThumb[showhours="true"] { + background-image: url(chrome://global/skin/media/scrubberThumbWide@2x.png); + background-size: 45px 28px; + } +} diff --git a/toolkit/themes/shared/media/volume-empty.png b/toolkit/themes/shared/media/volume-empty.png new file mode 100644 index 000000000..589abfbd5 Binary files /dev/null and b/toolkit/themes/shared/media/volume-empty.png differ diff --git a/toolkit/themes/shared/media/volume-empty@2x.png b/toolkit/themes/shared/media/volume-empty@2x.png new file mode 100644 index 000000000..ca494e893 Binary files /dev/null and b/toolkit/themes/shared/media/volume-empty@2x.png differ diff --git a/toolkit/themes/shared/media/volume-full.png b/toolkit/themes/shared/media/volume-full.png new file mode 100644 index 000000000..4398a569b Binary files /dev/null and b/toolkit/themes/shared/media/volume-full.png differ diff --git a/toolkit/themes/shared/media/volume-full@2x.png b/toolkit/themes/shared/media/volume-full@2x.png new file mode 100644 index 000000000..5bf63c7ee Binary files /dev/null and b/toolkit/themes/shared/media/volume-full@2x.png differ diff --git a/toolkit/themes/shared/menu-check-active.svg b/toolkit/themes/shared/menu-check-active.svg new file mode 100644 index 000000000..ba8a7c992 --- /dev/null +++ b/toolkit/themes/shared/menu-check-active.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/menu-check-black.svg b/toolkit/themes/shared/menu-check-black.svg new file mode 100644 index 000000000..f388f8151 --- /dev/null +++ b/toolkit/themes/shared/menu-check-black.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/menu-check-hover.svg b/toolkit/themes/shared/menu-check-hover.svg new file mode 100644 index 000000000..b8c8ec322 --- /dev/null +++ b/toolkit/themes/shared/menu-check-hover.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/menu-check.png b/toolkit/themes/shared/menu-check.png new file mode 100644 index 000000000..d82635a63 Binary files /dev/null and b/toolkit/themes/shared/menu-check.png differ diff --git a/toolkit/themes/shared/menu-check@2x.png b/toolkit/themes/shared/menu-check@2x.png new file mode 100644 index 000000000..2b1f83613 Binary files /dev/null and b/toolkit/themes/shared/menu-check@2x.png differ diff --git a/toolkit/themes/shared/mozapps.inc.mn b/toolkit/themes/shared/mozapps.inc.mn new file mode 100644 index 000000000..bb43fd4d2 --- /dev/null +++ b/toolkit/themes/shared/mozapps.inc.mn @@ -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/. + +# 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/extensionGeneric.svg (../../shared/extensions/extensionGeneric.svg) + skin/classic/mozapps/extensions/utilities.svg (../../shared/extensions/utilities.svg) + skin/classic/mozapps/extensions/navigation.png (../../shared/extensions/navigation.png) + skin/classic/mozapps/extensions/alerticon-warning.svg (../../shared/extensions/alerticon-warning.svg) + skin/classic/mozapps/extensions/alerticon-error.svg (../../shared/extensions/alerticon-error.svg) + skin/classic/mozapps/extensions/alerticon-info-positive.svg (../../shared/extensions/alerticon-info-positive.svg) + skin/classic/mozapps/extensions/alerticon-info-negative.svg (../../shared/extensions/alerticon-info-negative.svg) + skin/classic/mozapps/formautofill/requestAutocomplete.css (../../shared/formautofill/requestAutocomplete.css) + skin/classic/mozapps/plugins/pluginProblem.css (../../shared/plugins/pluginProblem.css) + skin/classic/mozapps/aboutNetworking.css (../../shared/aboutNetworking.css) +#ifndef ANDROID + skin/classic/mozapps/aboutProfiles.css (../../shared/aboutProfiles.css) +#endif + skin/classic/mozapps/aboutServiceWorkers.css (../../shared/aboutServiceWorkers.css) + skin/classic/mozapps/plugins/contentPluginActivate.png (../../shared/plugins/contentPluginActivate.png) + skin/classic/mozapps/plugins/contentPluginBlocked.png (../../shared/plugins/contentPluginBlocked.png) + skin/classic/mozapps/plugins/contentPluginClose.png (../../shared/plugins/contentPluginClose.png) + skin/classic/mozapps/plugins/contentPluginCrashed.png (../../shared/plugins/contentPluginCrashed.png) + skin/classic/mozapps/plugins/contentPluginStripe.png (../../shared/plugins/contentPluginStripe.png) diff --git a/toolkit/themes/shared/narrate.css b/toolkit/themes/shared/narrate.css new file mode 100644 index 000000000..8a44e78e2 --- /dev/null +++ b/toolkit/themes/shared/narrate.css @@ -0,0 +1,46 @@ +.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; +} + +.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; +} diff --git a/toolkit/themes/shared/narrate/arrow.svg b/toolkit/themes/shared/narrate/arrow.svg new file mode 100644 index 000000000..2fb21417d --- /dev/null +++ b/toolkit/themes/shared/narrate/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/toolkit/themes/shared/narrate/back.svg b/toolkit/themes/shared/narrate/back.svg new file mode 100644 index 000000000..d29586e38 --- /dev/null +++ b/toolkit/themes/shared/narrate/back.svg @@ -0,0 +1,15 @@ + + + + + + + + diff --git a/toolkit/themes/shared/narrate/fast.svg b/toolkit/themes/shared/narrate/fast.svg new file mode 100644 index 000000000..cd25a6a03 --- /dev/null +++ b/toolkit/themes/shared/narrate/fast.svg @@ -0,0 +1,3 @@ + + + diff --git a/toolkit/themes/shared/narrate/forward.svg b/toolkit/themes/shared/narrate/forward.svg new file mode 100644 index 000000000..53e64e951 --- /dev/null +++ b/toolkit/themes/shared/narrate/forward.svg @@ -0,0 +1,15 @@ + + + + + + + + diff --git a/toolkit/themes/shared/narrate/slow.svg b/toolkit/themes/shared/narrate/slow.svg new file mode 100644 index 000000000..1892b66e1 --- /dev/null +++ b/toolkit/themes/shared/narrate/slow.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/toolkit/themes/shared/narrate/start.svg b/toolkit/themes/shared/narrate/start.svg new file mode 100644 index 000000000..95fa71313 --- /dev/null +++ b/toolkit/themes/shared/narrate/start.svg @@ -0,0 +1,3 @@ + + + diff --git a/toolkit/themes/shared/narrate/stop.svg b/toolkit/themes/shared/narrate/stop.svg new file mode 100644 index 000000000..c017c578f --- /dev/null +++ b/toolkit/themes/shared/narrate/stop.svg @@ -0,0 +1,3 @@ + + + diff --git a/toolkit/themes/shared/narrateControls.css b/toolkit/themes/shared/narrateControls.css new file mode 100644 index 000000000..91d02d85a --- /dev/null +++ b/toolkit/themes/shared/narrateControls.css @@ -0,0 +1,185 @@ +: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 new file mode 100644 index 000000000..151749f72 --- /dev/null +++ b/toolkit/themes/shared/non-mac.jar.inc.mn @@ -0,0 +1,141 @@ +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.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/arrow.css (../../windows/global/arrow.css) + skin/classic/global/customizeToolbar.css (../../windows/global/customizeToolbar.css) + skin/classic/global/datetimepicker.css (../../windows/global/datetimepicker.css) + skin/classic/global/dialog.css (../../windows/global/dialog.css) + skin/classic/global/expander.css (../../windows/global/expander.css) + skin/classic/global/filefield.css (../../windows/global/filefield.css) + skin/classic/global/globalBindings.xml (../../windows/global/globalBindings.xml) + skin/classic/global/linkTree.css (../../windows/global/linkTree.css) + skin/classic/global/progressmeter.css (../../windows/global/progressmeter.css) + skin/classic/global/resizer.css (../../windows/global/resizer.css) + skin/classic/global/richlistbox.css (../../windows/global/richlistbox.css) + skin/classic/global/scale.css (../../windows/global/scale.css) +#ifndef MOZ_THEME_FASTSTRIPE + skin/classic/global/scrollbars.css (../../windows/global/xulscrollbars.css) +#endif + skin/classic/global/spinbuttons.css (../../windows/global/spinbuttons.css) + skin/classic/global/tabprompts.css (../../windows/global/tabprompts.css) + skin/classic/global/wizard.css (../../windows/global/wizard.css) + + skin/classic/global/arrow/arrow-dn.gif (../../windows/global/arrow/arrow-dn.gif) + skin/classic/global/arrow/arrow-dn-dis.gif (../../windows/global/arrow/arrow-dn-dis.gif) + skin/classic/global/arrow/arrow-dn-hov.gif (../../windows/global/arrow/arrow-dn-hov.gif) + skin/classic/global/arrow/arrow-dn-sharp.gif (../../windows/global/arrow/arrow-dn-sharp.gif) + skin/classic/global/arrow/arrow-down.png (../../windows/global/arrow/arrow-down.png) + skin/classic/global/arrow/arrow-lft.gif (../../windows/global/arrow/arrow-lft.gif) + skin/classic/global/arrow/arrow-lft-dis.gif (../../windows/global/arrow/arrow-lft-dis.gif) + skin/classic/global/arrow/arrow-lft-sharp.gif (../../windows/global/arrow/arrow-lft-sharp.gif) + skin/classic/global/arrow/arrow-lft-sharp-end.gif (../../windows/global/arrow/arrow-lft-sharp-end.gif) + skin/classic/global/arrow/arrow-rit.gif (../../windows/global/arrow/arrow-rit.gif) + skin/classic/global/arrow/arrow-rit-dis.gif (../../windows/global/arrow/arrow-rit-dis.gif) + skin/classic/global/arrow/arrow-rit-sharp.gif (../../windows/global/arrow/arrow-rit-sharp.gif) + skin/classic/global/arrow/arrow-rit-sharp-end.gif (../../windows/global/arrow/arrow-rit-sharp-end.gif) + skin/classic/global/arrow/arrow-up.gif (../../windows/global/arrow/arrow-up.gif) + skin/classic/global/arrow/arrow-up-dis.gif (../../windows/global/arrow/arrow-up-dis.gif) + skin/classic/global/arrow/arrow-up-hov.gif (../../windows/global/arrow/arrow-up-hov.gif) + skin/classic/global/arrow/arrow-up-sharp.gif (../../windows/global/arrow/arrow-up-sharp.gif) + 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/arrow/panelarrow-horizontal-themed.svg (../../windows/global/arrow/panelarrow-horizontal-themed.svg) + skin/classic/global/arrow/panelarrow-vertical-themed.svg (../../windows/global/arrow/panelarrow-vertical-themed.svg) + + skin/classic/global/checkbox/cbox-check.gif (../../windows/global/checkbox/cbox-check.gif) + skin/classic/global/checkbox/cbox-check-dis.gif (../../windows/global/checkbox/cbox-check-dis.gif) +* skin/classic/global/dirListing/dirListing.css (../../windows/global/dirListing/dirListing.css) + skin/classic/global/dirListing/folder.png (../../windows/global/dirListing/folder.png) + skin/classic/global/dirListing/local.png (../../windows/global/dirListing/local.png) + skin/classic/global/dirListing/up.png (../../windows/global/dirListing/up.png) + skin/classic/global/icons/Close.gif (../../windows/global/icons/Close.gif) + skin/classic/global/icons/close.png (../../windows/global/icons/close.png) + skin/classic/global/icons/close@2x.png (../../windows/global/icons/close@2x.png) + skin/classic/global/icons/close-inverted.png (../../windows/global/icons/close-inverted.png) + skin/classic/global/icons/close-inverted@2x.png (../../windows/global/icons/close-inverted@2x.png) + skin/classic/global/icons/collapse.png (../../windows/global/icons/collapse.png) + skin/classic/global/icons/Error.png (../../windows/global/icons/Error.png) + skin/classic/global/icons/error-16.png (../../windows/global/icons/error-16.png) + skin/classic/global/icons/error-64.png (../../windows/global/icons/error-64.png) + skin/classic/global/icons/expand.png (../../windows/global/icons/expand.png) + skin/classic/global/icons/folder-item.png (../../windows/global/icons/folder-item.png) + skin/classic/global/icons/information-16.png (../../windows/global/icons/information-16.png) + skin/classic/global/icons/information-24.png (../../windows/global/icons/information-24.png) + skin/classic/global/icons/information-32.png (../../windows/global/icons/information-32.png) + skin/classic/global/icons/Minimize.gif (../../windows/global/icons/Minimize.gif) + skin/classic/global/icons/Print-preview.png (../../windows/global/icons/Print-preview.png) + skin/classic/global/icons/Portrait.png (../../windows/global/icons/Portrait.png) + skin/classic/global/icons/Landscape.png (../../windows/global/icons/Landscape.png) + skin/classic/global/icons/Question.png (../../windows/global/icons/Question.png) + skin/classic/global/icons/question-16.png (../../windows/global/icons/question-16.png) + skin/classic/global/icons/question-64.png (../../windows/global/icons/question-64.png) + skin/classic/global/icons/resizer-rtl.png (../../windows/global/icons/resizer-rtl.png) + skin/classic/global/icons/Restore.gif (../../windows/global/icons/Restore.gif) + skin/classic/global/icons/Search-close.png (../../windows/global/icons/Search-close.png) + skin/classic/global/icons/Search-glass.png (../../windows/global/icons/Search-glass.png) + skin/classic/global/icons/tabprompts-bgtexture.png (../../windows/global/icons/tabprompts-bgtexture.png) + skin/classic/global/icons/Warning.png (../../windows/global/icons/Warning.png) + skin/classic/global/icons/warning-large.png (../../windows/global/icons/warning-large.png) + skin/classic/global/icons/warning-16.png (../../windows/global/icons/warning-16.png) + skin/classic/global/icons/warning-64.png (../../windows/global/icons/warning-64.png) + skin/classic/global/icons/windowControls.png (../../windows/global/icons/windowControls.png) + skin/classic/global/radio/radio-check.gif (../../windows/global/radio/radio-check.gif) + skin/classic/global/radio/radio-check-dis.gif (../../windows/global/radio/radio-check-dis.gif) + skin/classic/global/scale/scale-tray-horiz.gif (../../windows/global/scale/scale-tray-horiz.gif) + skin/classic/global/scale/scale-tray-vert.gif (../../windows/global/scale/scale-tray-vert.gif) + skin/classic/global/scrollbar/slider.gif (../../windows/global/scrollbar/slider.gif) + skin/classic/global/splitter/grip-bottom.gif (../../windows/global/splitter/grip-bottom.gif) + skin/classic/global/splitter/grip-top.gif (../../windows/global/splitter/grip-top.gif) + skin/classic/global/splitter/grip-left.gif (../../windows/global/splitter/grip-left.gif) + skin/classic/global/splitter/grip-right.gif (../../windows/global/splitter/grip-right.gif) + skin/classic/global/toolbar/chevron.gif (../../windows/global/toolbar/chevron.gif) + skin/classic/global/toolbar/chevron-inverted.png (../../windows/global/toolbar/chevron-inverted.png) + skin/classic/global/tree/columnpicker.gif (../../windows/global/tree/columnpicker.gif) + skin/classic/global/tree/sort-asc.png (../../windows/global/tree/sort-asc.png) + skin/classic/global/tree/sort-dsc.png (../../windows/global/tree/sort-dsc.png) + skin/classic/global/tree/sort-asc-classic.png (../../windows/global/tree/sort-asc-classic.png) + skin/classic/global/tree/sort-dsc-classic.png (../../windows/global/tree/sort-dsc-classic.png) + + skin/classic/mozapps/downloads/downloadButtons.png (../../windows/mozapps/downloads/downloadButtons.png) + skin/classic/mozapps/downloads/unknownContentType.css (../../windows/mozapps/downloads/unknownContentType.css) + skin/classic/mozapps/extensions/about.css (../../windows/mozapps/extensions/about.css) + skin/classic/mozapps/extensions/blocklist.css (../../windows/mozapps/extensions/blocklist.css) + skin/classic/mozapps/extensions/update.css (../../windows/mozapps/extensions/update.css) + skin/classic/mozapps/extensions/discover-logo.png (../../windows/mozapps/extensions/discover-logo.png) + skin/classic/mozapps/extensions/experimentGeneric.png (../../windows/mozapps/extensions/experimentGeneric.png) + skin/classic/mozapps/extensions/rating-won.png (../../windows/mozapps/extensions/rating-won.png) + skin/classic/mozapps/extensions/rating-not-won.png (../../windows/mozapps/extensions/rating-not-won.png) + skin/classic/mozapps/extensions/cancel.png (../../windows/mozapps/extensions/cancel.png) + skin/classic/mozapps/extensions/eula.css (../../windows/mozapps/extensions/eula.css) + skin/classic/mozapps/handling/handling.css (../../windows/mozapps/handling/handling.css) + skin/classic/mozapps/plugins/pluginBlocked-64.png (../../windows/mozapps/plugins/pluginBlocked-64.png) + skin/classic/mozapps/plugins/pluginHelp-16.png (../../windows/mozapps/plugins/pluginHelp-16.png) + skin/classic/mozapps/profile/profileSelection.css (../../windows/mozapps/profile/profileSelection.css) + skin/classic/mozapps/update/downloadButtons.png (../../windows/mozapps/update/downloadButtons.png) +* skin/classic/mozapps/xpinstall/xpinstallConfirm.css (../../windows/mozapps/extensions/xpinstallConfirm.css) + +#if MOZ_BUILD_APP == browser +[browser/extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}] chrome.jar: +#elif MOZ_SEPARATE_MANIFEST_FOR_THEME_OVERRIDES +[extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}] chrome.jar: +#endif +% override chrome://global/skin/arrow/arrow-lft-hov.gif chrome://global/skin/arrow/arrow-lft.gif +% override chrome://global/skin/arrow/arrow-rit-hov.gif chrome://global/skin/arrow/arrow-rit.gif +% override chrome://mozapps/skin/extensions/category-dictionaries.png chrome://mozapps/skin/extensions/dictionaryGeneric.png +% override chrome://mozapps/skin/extensions/category-experiments.png chrome://mozapps/skin/extensions/experimentGeneric.png +% 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 + diff --git a/toolkit/themes/shared/passwordmgr.css b/toolkit/themes/shared/passwordmgr.css new file mode 100644 index 000000000..f95d176d7 --- /dev/null +++ b/toolkit/themes/shared/passwordmgr.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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +.contentPane { + margin: 9px 8px 5px 8px; +} + +.actionButtons { + margin: 0px 3px 6px 3px !important; +} + +treechildren::-moz-tree-image(siteCol) { + list-style-image: url(chrome://mozapps/skin/places/defaultFavicon.png); + width: 16px; + height: 16px; + margin-inline-end: 5px; +} + +@media (min-resolution: 1.1dppx) { + treechildren::-moz-tree-image(siteCol) { + list-style-image: url(chrome://mozapps/skin/places/defaultFavicon@2x.png); + } +} diff --git a/toolkit/themes/shared/places/defaultFavicon-inverted.png b/toolkit/themes/shared/places/defaultFavicon-inverted.png new file mode 100644 index 000000000..82c8d1f87 Binary files /dev/null and b/toolkit/themes/shared/places/defaultFavicon-inverted.png differ diff --git a/toolkit/themes/shared/places/defaultFavicon-inverted@2x.png b/toolkit/themes/shared/places/defaultFavicon-inverted@2x.png new file mode 100644 index 000000000..b5663444e Binary files /dev/null and b/toolkit/themes/shared/places/defaultFavicon-inverted@2x.png differ diff --git a/toolkit/themes/shared/places/defaultFavicon.png b/toolkit/themes/shared/places/defaultFavicon.png new file mode 100644 index 000000000..4092dfb55 Binary files /dev/null and b/toolkit/themes/shared/places/defaultFavicon.png differ diff --git a/toolkit/themes/shared/places/defaultFavicon@2x.png b/toolkit/themes/shared/places/defaultFavicon@2x.png new file mode 100644 index 000000000..a1b23f683 Binary files /dev/null and b/toolkit/themes/shared/places/defaultFavicon@2x.png differ diff --git a/toolkit/themes/shared/plugins/contentPluginActivate.png b/toolkit/themes/shared/plugins/contentPluginActivate.png new file mode 100644 index 000000000..31351dc3b Binary files /dev/null and b/toolkit/themes/shared/plugins/contentPluginActivate.png differ diff --git a/toolkit/themes/shared/plugins/contentPluginBlocked.png b/toolkit/themes/shared/plugins/contentPluginBlocked.png new file mode 100644 index 000000000..1e092bf18 Binary files /dev/null and b/toolkit/themes/shared/plugins/contentPluginBlocked.png differ diff --git a/toolkit/themes/shared/plugins/contentPluginClose.png b/toolkit/themes/shared/plugins/contentPluginClose.png new file mode 100644 index 000000000..61eb55828 Binary files /dev/null and b/toolkit/themes/shared/plugins/contentPluginClose.png differ diff --git a/toolkit/themes/shared/plugins/contentPluginCrashed.png b/toolkit/themes/shared/plugins/contentPluginCrashed.png new file mode 100644 index 000000000..89d3e91a9 Binary files /dev/null and b/toolkit/themes/shared/plugins/contentPluginCrashed.png differ diff --git a/toolkit/themes/shared/plugins/contentPluginDisabled.png b/toolkit/themes/shared/plugins/contentPluginDisabled.png new file mode 100644 index 000000000..b8b6a1020 Binary files /dev/null and b/toolkit/themes/shared/plugins/contentPluginDisabled.png differ diff --git a/toolkit/themes/shared/plugins/contentPluginStripe.png b/toolkit/themes/shared/plugins/contentPluginStripe.png new file mode 100644 index 000000000..6035ee121 Binary files /dev/null and b/toolkit/themes/shared/plugins/contentPluginStripe.png differ diff --git a/toolkit/themes/shared/plugins/pluginProblem.css b/toolkit/themes/shared/plugins/pluginProblem.css new file mode 100644 index 000000000..9929bd92a --- /dev/null +++ b/toolkit/themes/shared/plugins/pluginProblem.css @@ -0,0 +1,206 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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 html url(http://www.w3.org/1999/xhtml); + +/* These styles affect only the bound element, not other page content. */ +/* Keep any changes to these styles in sync with plugin-doorhanger.inc.css */ +.mainBox { + font: message-box; + font-size: 12px; + text-align: center; + display: table; + width: 100%; + height: 100%; + background-color: rgb(72,72,72); + color: white; + -moz-user-select: none; +} + +.hoverBox { + display: table-cell; + box-sizing: border-box; + padding: 5px; + vertical-align: middle; + width: 100%; + height: 100%; +} +:-moz-handler-vulnerable-updatable .hoverBox:active, +:-moz-handler-vulnerable-no-update .hoverBox:active, +:-moz-handler-clicktoplay .hoverBox:active { + background-color: rgb(65, 65, 65); +} + +:-moz-handler-clicktoplay .hoverBox:active .msgTapToPlay, +:-moz-handler-clicktoplay .hoverBox:active .msgClickToPlay, +:-moz-handler-vulnerable-updatable .hoverBox:active .msgTapToPlay, +:-moz-handler-vulnerable-updatable .hoverBox:active .msgClickToPlay, +:-moz-handler-vulnerable-no-update .hoverBox:active .msgTapToPlay, +:-moz-handler-vulnerable-no-update .hoverBox:active .msgClickToPlay { + color: red; +} + +:-moz-handler-vulnerable-updatable .hoverBox, +:-moz-handler-vulnerable-no-update .hoverBox, +:-moz-handler-blocked .hoverBox, +:-moz-handler-crashed .hoverBox { + background-image: url(chrome://mozapps/skin/plugins/contentPluginStripe.png); +} + +html|a { + color: white; +} + +.icon { + width: 48px; + height: 48px; + background-position: center; + background-repeat: no-repeat; + border: none; + background-color: transparent; + -moz-user-focus: ignore; + margin-bottom: 6px; +} + +:-moz-handler-vulnerable-updatable .icon, +:-moz-handler-vulnerable-no-update .icon { + background-image: url(chrome://mozapps/skin/plugins/contentPluginBlocked.png); + -moz-user-focus: normal; +} +:-moz-handler-blocked .icon { + background-image: url(chrome://mozapps/skin/plugins/contentPluginBlocked.png); +} +a .icon, +:-moz-handler-clicktoplay .icon { + background-image: url(chrome://mozapps/skin/plugins/contentPluginActivate.png); + -moz-user-focus: normal; +} +:-moz-handler-crashed .icon { + background-image: url(chrome://mozapps/skin/plugins/contentPluginCrashed.png); +} + +.throbber { + padding-left: 16px; /* width of the background image */ + background: url(chrome://global/skin/icons/loading.png) no-repeat; + margin-left: 5px; +} + +@media (min-resolution: 1.1dppx) { + .throbber { + background-image: url(chrome://global/skin/icons/loading@2x.png); + background-size: 16px; + } +} + +.msgTapToPlay, +.msgClickToPlay { + text-decoration: underline; +} + +@media not all and (-moz-touch-enabled) { + :-moz-handler-clicktoplay .msgTapToPlay, + a .msgTapToPlay { + display: none; + } +} + +@media (-moz-touch-enabled) { + :-moz-handler-clicktoplay .msgClickToPlay, + a .msgClickToPlay { + display: none; + } +} + +.submitStatus div { + min-height: 19px; /* height of biggest line (with throbber) */ +} + +.submitComment { + width: 340px; + height: 70px; + padding: 5px; + border: none; + border-radius: 5px; + resize: none; + font-family: inherit; + font-size: inherit; +} + +.submitURLOptInBox { + text-align: start; +} + +.submitURLOptIn { + margin-left: -1px; +} + +.mainBox[chromedir="rtl"] .submitURLOptIn { + margin-left: 0; + margin-right: -1px; +} + +.submitButtonBox { + margin-top: 7px; +} + +.submitButton { + float: right; +} + +.mainBox[chromedir="rtl"] .submitButton { + float: left; +} + +.helpIcon { + display: inline-block; + min-width: 16px; + min-height: 16px; + background: url(chrome://mozapps/skin/plugins/pluginHelp-16.png) no-repeat; + cursor: pointer; + float: left; +} + +.mainBox[chromedir="rtl"] .helpIcon { + float: right; +} + +.closeIcon { + display: block; + width: 16px; + height: 16px; + margin-top: 4px; + margin-inline-start: -20px; + margin-inline-end: 4px; + border: none; + background-color: transparent; + background-image: url("chrome://mozapps/skin/plugins/contentPluginClose.png"); + background-repeat: no-repeat; +} + +.closeIcon:hover { + background-position: -16px 0; +} + +.closeIcon:hover:active { + background-position: -32px 0; +} + +.action-link { + display: inline-block; + border-radius: 10px; + background-color: rgb(35, 35, 35); + padding: 2px 8px; + margin-top: 7px; + text-decoration: none; +} +.action-link:active { + background-color: rgb(20, 20, 20); +} + +:-moz-handler-vulnerable-updatable .action-link { + background-color: #a81b0c; +} +:-moz-handler-vulnerable-updatable .action-link:active { + background-color: #801409; +} diff --git a/toolkit/themes/shared/reader/RM-Close-24x24.svg b/toolkit/themes/shared/reader/RM-Close-24x24.svg new file mode 100644 index 000000000..89fc1eb86 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Close-24x24.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + 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 000000000..48bbb9e89 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + 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 000000000..bcdcbe8ad --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + 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 000000000..05d52828a --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + 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 000000000..0a5ee0dcc --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + 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 000000000..e85a39761 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Minus-24x24.svg @@ -0,0 +1,7 @@ + + + + + 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 000000000..f3a98ddb2 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Plus-24x24.svg @@ -0,0 +1,7 @@ + + + + + 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 000000000..5f43818de --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg @@ -0,0 +1,7 @@ + + + + + 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 000000000..837392ff3 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/toolkit/themes/shared/timepicker.css b/toolkit/themes/shared/timepicker.css new file mode 100644 index 000000000..e8d081b30 --- /dev/null +++ b/toolkit/themes/shared/timepicker.css @@ -0,0 +1,153 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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 -- cgit v1.2.3